Redux学习--异步action和react-redux汇总

一.异步action

1. 明确：延迟的动作不想交给组件自身，想交给action

2. 何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回

3. 具体编码：
   （1）下载yarn add redux-thunk，并配置在store，因为store只能识别对象类型的action，对于返回的函数action，则需要中间商来帮助store执行一下
   （2）在redux中引入applyMiddleware中间商，中间商应用刚才下载的thunk
   

   （3）创建的异步action，返回一个函数，在该函数中写异步任务
   

   （4）异步任务有结果后，分发一个同步的action去真正操作数据

注意：

1. 异步action返回一个函数，而同步action返回一个object对象
2. 异步action不是必须写的

二.react-redux

react-redux是facebook封装的组件库，使得redux更好的与react相结合，注意：react-redux并不是redux

1. 所有的UI组件都需要被容器组件包裹，他们是父子关系
2. 容器组件是真正和redux打交道的，里面可以随意使用redux的api
3. UI组件中不可以使用任何redux的api
4. 容器组件会传给UI组件：（1）redux中所保存的状态 （2）用于操作状态的方法
5. 备注：容器给UI传递：redux内的状态、操作状态的方法，均通过props传递

三.react-redux的基本使用

1. 明确两个概念：
   （1）UI组件：不能使用任何reudx的api，只能负责页面的呈现、交互等
   （2）容器组件：负责和redux通信，将结果交给UI组件

2. 如何创建一个容器组件----靠react-redux的connect函数
   connect(mapStateToProps,mapDispatchToProps)(UI组件)
   mapStateToProps:映射状态，返回值是一个对象
   mapDispatchToProps：映射操作对象的方法，返回值是一个对象
   

3. 备注：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入的
   

四.mapDispatchToProps的简写方式

mapDispatchToProps有两种书写方式：（1）function形式 （2）对象形式（简写）

当为对象形式时，react-redux内部会自动帮你把生成的action对象dispatch出去

借助redux内的Provider给整个应用中所有的容器组件添加store={store}，避免手动一个个添加，此外react-redux可以自动检测redux内部状态的变化，进而重新渲染组件，因此不需要store.subscribe额外检测了

五.react-redux优化

1. 容器组件和UI组件整合成一个文件

2. 无需自己给容器组件传递store，借助redux内的Provider给<App/>包裹一个<Provider store={store}即可，避免手动一个个添加。
   

3. 使用了react-redux后也不用再自己检测redux中状态的变化了，容器组件可以自动完成这个工作

4. mapDispatchToProps也可以简单的写成一个对象

5. 一个组件要和redux打交道，要经过哪几步？
   （1）定义好UI组件----不暴露
   （2）引入connect生成一个容器组件，并暴露，写法如下：

connect(
	state => ({key:value}), //映射状态
	{key:xxxxxxAction}//映射操作状态方法
)(UI组件)

6. 在UI组件中通过this.props.xxxxxx读取和操作状态

六.react-redux数据共享

现假设新创建一个组件Person，要使Person组件和Count组件数据共享

1. 要为Person组件编写对应的：action、reducer，配置constant常量

2. 重点：Person组件的reducer和count组件的reducer要使用redux中的combineReducers进行合并，合并后的总状态是一个对象！！！
   

3. 交给store的是总reducer，最后注意在组件内部取状态时，要取到位
   

七.react-redux开发者工具的使用

1. 首先yarn add redux-devtools-extension
2. 在store文件中配置
   （1）import {composeWithDevTools} from 'redux-devtools-extension'
   （2）createStore(allReducer, composeWithDevTools(applyMiddleware(thunk)))

八.react-redux的最终版

1. 尽量触发对象的简写形式
2. reducers文件夹中，编写index.js专门用于汇总并暴露所有的reducer