React---Redux异步action

一、分析

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

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

         (3).具体编码：

                    1).npm add redux-thunk，并配置在store中

                    2).创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务。

                    3).异步任务有结果后，分发一个同步的action去真正操作数据。

         (4).备注：异步action不是必须要写的，完全可以自己等待异步任务的结果了再去分发同步action。

二、代码

1. store.js

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

//引入createStore，专门用于创建redux中最为核心的store对象
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. 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的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的。
export const createIncrementAsyncAction = (data,time) => {
    return (dispatch)=>{
        setTimeout(()=>{
            dispatch(createIncrementAction(data))
        },time)
    }
}