React---Redux异步action

一、分析

　　 (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 }