【React】组件通信与redux

组件通信

• 父传子（props)：父通过props传递参数

• 子传父（props)：父通过props传递一个回调函数

• 祖传孙（React.createContext）

const MyContext=React.createContext()
const {Provider,Consumer}=MyContext

//父组件
<Provider value={}>
	<子组件/> //子组件及后代组件都能接收到
</Provider>

//后代组件
<Consumer>
{
	value=>{ //value就是传递的
		return //...
	}
}
</Consumer>

组件嵌套（集中管理）

• 将组件以回调形式集中管理

  //App组件
  <A render={(参数)=><B 参数={...}/>}/>
  

  App的子组件是A，A的子组件是B并且A可以传递参数给B

• 子组件A通过props接收参数render，因为是函数，所以要调用渲染B组件

  //A组件
  {props.render(参数)}//传递参数给B
  

redux

yarn add redux

• 组件与store仓库进行交互
• store仓库与reduce进行连接
• 组件发送action对象给store

Store

• 集中管理，返回一个对象
• 和reducer建立连接

import {createStore} from 'redux'
import reducer from './reducer'
export default createStore(reducer)

reducer

• 初始化state，加工state
• 接收dispatch过来的action对象，并进行操作
• 返回一个值

const initState = 0
export default (PreState = 0, action)=>{
    const { type, data } = action;
    switch (type) {
        case 'add':
            console.log("加");
            return PreState + data;
        case 'min':
            return PreState - data;
        default:
            return PreState;
    }
}

组件dispatch

• 引入store
• 通过store.dispatch(action)发送action对象
• 通过store.getState()获取reducer返回的值

 store.dispatch({ type: 'add', data: 1 }) //发送

<h1>{store.getState()}</h1> //接收

监听subscribe

• redux只能改变state，不会页面更新（跟setState不同）
• 需要监听state，来触发页面更新
• 写在最外面，监听所有，Diffing算法会优化

store.subscribe(() => {
  ReactDOM.render(<App />,document.getElementById('root'));
})

action

• 把action对象封装为函数

  export const add=()=>({type:'add',data:1})
  

  • 组件通过引入即可使用

    store.dispatch(add())
    

react-redux

npm add react-redux

• 将UI组件封装为容器组件，让容器组件与redux进行交互

• UI组件通过props获取state，和发送action的方法

• 通过封装为容器组件后，不再需要监听数据变化来驱动页面了

• store套在最外层，这样所有组件都能收到

  import { Provider } from 'react-redux'
  import store from './store'
  ReactDOM.render(
  	<Provider store={store}>
  	  <App />
  	</Provider>,
    document.getElementById('root')
  );
  

容器组件

• 使用connect方法

  connect(state函数,dispatch函数)(UI)
  

  • state函数：return一个对象，成员是state数据
    • 参数为接收到的state对象
  • dispatch函数：return一个对象，成员是发送action的方法
    • 可以简写成对象，内部会自动dispatch

import { connect } from 'react-redux'
export default connect(
  state => ({
	//...接收store返回的state对象
  }), {
	//...能发送action的方法
}
)(UI)

管理reducer

yarn add redux-devtools-extension

//store.js

import {createStore,combineReducers} from 'redux'
import countReducer from './reducers/count'
import personReducer from './reducers/person'
// 开发者工具
import {composeWithDevTools} from 'redux-devtools-extension'

const allReducer = combineReducers({
	countReducer,
	personReducer
})

export default createStore(allReduce,composeWithDevTools())

export default connect(
	state => ({
    //state为总的管理对象
		count:state.countReducer,
		renshu:state.personReducer.length,
	}),
	{
		jia:createIncrementAction,
		jian:createDecrementAction,
	}
)(Count)