一、分析
(1).明确:延迟的动作不想交给组件自身,想交给action
(2).何时需要异步action:想要对状态进行操作,但是具体的数据靠异步任务返回。
(3).具体编码:
1).
npm add redux-thunk,并配置在store中
2).创建action的函数不再返回一般对象,而是一个函数,该函数中写异步任务。
3).异步任务有结果后,分发一个同步的action去真正操作数据。
(4).备注:异步action不是必须要写的,完全可以自己等待异步任务的结果了再去分发同步action。
二、代码
1. store.js
1 /*
2 该文件专门用于暴露一个store对象,整个应用只有一个store对象
3 */
4
5 //引入createStore,专门用于创建redux中最为核心的store对象
6 import {createStore,applyMiddleware} from 'redux'
7 //引入为Count组件服务的reducer
8 import countReducer from './count_reducer'
9 //引入redux-thunk,用于支持异步action
10 import thunk from 'redux-thunk'
11 //暴露store
12 export default createStore(countReducer,applyMiddleware(thunk))
2. count_action.js
1 /*
2 该文件专门为Count组件生成action对象
3 */
4 import {INCREMENT,DECREMENT} from './constant'
5
6 //同步action,就是指action的值为Object类型的一般对象
7 export const createIncrementAction = data => ({type:INCREMENT,data})
8 export const createDecrementAction = data => ({type:DECREMENT,data})
9
10 //异步action,就是指action的值为函数,异步action中一般都会调用同步action,异步action不是必须要用的。
11 export const createIncrementAsyncAction = (data,time) => {
12 return (dispatch)=>{
13 setTimeout(()=>{
14 dispatch(createIncrementAction(data))
15 },time)
16 }
17 }