1、不成熟的异步修改

本示例修改自上一章完整版Redux求和Demo

1.1、CODE

目前涉及异步的操作就是【延时加】功能，顾只修改相关代码

1.1.1、count_action.js

/**
 * 该文件专门为Count组件生成action对象
 */
import { INCREMENT, DECREMENT } from './constant'
import store from './store'

// 同步action：指action的值是Object类型的一般对象
export const createIncrementAction = data => ({ type: INCREMENT, data })
export const createDecrementAction = data => ({ type: DECREMENT, data })

// 异步action：指action的值是函数
export const createIncrementAsyncAction = (data, time) => () => {
    setTimeout(() => {
        store.dispatch(createIncrementAction(data))
    }, time)
}

1.1.1、count_reducer.js

只修改了引入新action和异步加方法

// 引入actionCreator，专门用于创建action对象
import {
    createIncrementAction,
    createDecrementAction,
    createIncrementAsyncAction
} from '../../redux/count_action'



asyncAdd = () => {
    const { num } = this.state
    // setTimeout(() => {
    //     store.dispatch(createIncrementAction(num))
    // }, 2000)
    store.dispatch(createIncrementAsyncAction(num, 2000))
}

1.2、异常

如果你有幸见到了下面的报错：Actions must be plain objects

那么恭喜你，我要开始装杯了！！！

在这里插入图片描述

store只认 plain objects（朴实无华？就是纯Object类型对象），这里返回的是function，store表示 who are u？
You may need to add middleware to your store setup to handle dispatching other values, such as ‘redux-thunk’ to handle dispatching functions
- 你可能需要在存储设置中添加中间件来处理分派其他值，例如“redux-thunk”来处理分派功能
很明显，我们需要一个中间件去收拾store，让store真心接纳function类型的action，这个中间件就是 redux-thunk
- 安装指令：yarn add redux-thunk 或 npm i redux-thunk
- 安装好就好使了吗？No！需要配置在store中

2、异步action代码修正

2.1、store.js

从 redux 引入 applyMiddleware
引入 redux-thunk
通过 applyMiddleware 添加中间件 thunk

/* 
    该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

// 引入createStore，专门用于创建redux中最为核心的store对象
// 引入applyMiddleware 执行中间件
import { createStore, applyMiddleware } from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
// 引入 redux-thunk 用于支持异步action
import thunk from 'redux-thunk'

//暴露store
export default createStore(countReducer, applyMiddleware(thunk))

2.2、count_action.js

/**
 * 该文件专门为Count组件生成action对象
 */
import { INCREMENT, DECREMENT } from './constant'

// 同步action：指action的值是Object类型的一般对象
export const createIncrementAction = data => ({ type: INCREMENT, data })
export const createDecrementAction = data => ({ type: DECREMENT, data })

// 异步action：指action的值是函数（不需要额外引入store了，人家直接把dispatch传给你了）
export const createIncrementAsyncAction = (data, time) => dispatch => {
    setTimeout(() => {
        dispatch(createIncrementAction(data))
    }, time)
}

3、小总结

明确：延迟的动作不想交给组件自身，想交给action
何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回
1. 比如发送请求获取数据
添加中间件具体编码：
1. yarn add redux-thunk 或 npm i redux-thunk，并配置在store中
2. 创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务
3. 异步任务有结果后，分发一个同步的action去真正操作数据
备注：异步action不是必须要写的，完全可以自己等待异步任务的结果了再去分发同步action