redux

一、reducer

1. reducer的本质是一个函数，接收：preState, action，返回加工后的状态

2. reducer有两个作用：初始化状态，加工状态

3. reducer被第一次调用时，是store自动触发的，
   传递的preState是undefined，
   传递的action是：{type: ‘@@REDUX/INIT_a.2.b.4’}

4. 在index.js中监测store中状态的改变，一旦发生改变重新渲染

备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写

二、异步action版
1）明确：延迟的动作不想交给组件自身，想交给action
2) 何时需要异步action: 想要对状态进行操作，但是具体的数据靠异步任务返回。
3）具体编码

   1) yarn add redux-thunk, 并配置在store中
   2）创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务
   3）异步任务有结果后，分发一个同步的action去真正操作数据

备注：异步action不是必须要写的，完全可以自己等待异步任务的结果了再去分发同步action

三、react-redux基本使用
1、明确两个概念
1）UI组件：不能使用任何redux的api，只负责页面的呈现，交互等。
2）容器组件：负责和redux通信，将结果交给UI组件
2、如何创建一个容器组件-靠react-redux的connect函数

connect(mapStateToProps, mapDispatchToProps)(UI组件)

mapStateToProps:映射状态，返回值是一个对象
mapDispatchToProps：映射操作状态的方法，返回值是一个对象

备注1：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入。
备注2：mapDispatchToProps，也可以是一个对象

四、react-redux优化
1、容器组件和UI组件整合一个文件
2、无需自己给容器组件传递store，

给<App/>包裹一个<Provider store={store}>即可

 3、使用了react-redux后，也不用再自己监测redux中状态的改变了，容器组件可以自动完成这个工作。
 4、mapDispatchToProps也可以简单的写成一个对象
 5、一个组件要和redux“打交道”要经过哪几步？

1) 定义好UI组件---不暴露
2）引入connect生产一个容器组件，并暴露，写法如下：
   connect(
        state => ({key: value}),
        {key: xxxAction}
   )(UI组件)
3）在组件中通过 this.props.xxx读取和操作状态

五、数据共享
1、两个reducer要使用 combineReducers进行合并，合并后的总状态是一个对象。
六、react-redux开发工具的使用

1) yarn add redux-devtools-extension
2) store中进行配置
   import {composeWithDevTools} from 'redux-devtools-extension';
   const store = createStore(allReducer, composeWithDevTools(applyMiddleware(thunk)));