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 }