三、【redux】异步action

action分两类：

• 同步：指action的值是Object类型的一般对象
• 异步：指action的值是函数

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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))
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3、小总结

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