異步action

• action：Object{} => 同步action
• action：function() => 異步action

store監(jiān)測到傳入的action是一個一般對象，那么store就知道這是一個同步的action，store就會把這個action交給Reducers去加工，執(zhí)行。

但是store若監(jiān)測到傳入的action是一個函數(shù)，那么store就知道這是一個異步的action，store就會配合中間件，先調(diào)用這個函數(shù)。等到函數(shù)內(nèi)的異步任務結(jié)束，再調(diào)用函數(shù)內(nèi)部的同步的dispatch，再交給Reducers去加工狀態(tài)。同時，store調(diào)用這個包裹著異步任務的函數(shù)時，會傳入一個dispatch方法作為函數(shù)的參數(shù)，以供函數(shù)內(nèi)部異步任務結(jié)束時使用這個同步的dispatch。

中間件（Middleware）：redux-thunk

安裝中間件：

npm install redux-thunk
// 或
yarn add redux-thunk

引入中間件：

既然中間件是配合store使用的，那么當然是在store中引入并使用這個中間件

store.js:

/* 
  該文件專門用于暴露一個store對象，整個應用只有一個store對象
*/
// 引入createStore，專門用于創(chuàng)建redux中最為核心的store對象
import { legacy_createStore as 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))

代碼解釋：

applyMiddleware是redux中用于執(zhí)行中間件的函數(shù)；

引入redux-thunk中間件；

在creaetStore時，將applyMiddleware傳入作為createStore的第二個參數(shù)；

applyMiddleware本身是一個函數(shù)，用于執(zhí)行中間件，所以要把（thunk）傳入applyMiddleware這個函數(shù)。

applyMiddleware(thunk)含義是：執(zhí)行thunk這個中間件。

這樣一來，store就會在接收到一個函數(shù)類型的action時，去調(diào)用這個action對應的函數(shù)。

并且，異步action中一般都會調(diào)用同步的action，所以store在調(diào)用這個異步action對應的函數(shù)時，會傳入dispatch方法作為參數(shù)，以供異步任務結(jié)束后，使用這個dispatch方法調(diào)用同步的action。

count_action_creator.js:

/* 
  該文件專門為Count組件生成action動作對象
*/
import { INCREMENT, DECREMENT } from './constant'
// 同步action，就是指action的值為Object對象
export const createIncrementAction = data => ({ type: INCREMENT, data })
// ({ type: 'increment', data }) 相當于 { return { type: 'increment', data } }
export const createDecrementAction = data => ({ type: DECREMENT, data })

// 異步action，就是指action的值是函數(shù)
export const createIncrementAsyncAction = (data, time) => {
  return (dispatch) => {
    setTimeout(() => {
      dispatch(createIncrementAction(data))
    }, time)
  }
}

在Count組件中調(diào)用這個函數(shù)：

incrementAsync = () => {
  const { value } = this.selectedNumber
  store.dispatch(createIncrementAsyncAction(value * 1, 500))
}

異步action總結(jié)：

延遲的動作不想交給組件自身，想交給action時，可以使用異步的action
（但異步action并不是必須的）；

何時需要異步action：
想對狀態(tài)進行操作，但是具體的數(shù)據(jù)靠異步任務返回；

具體編碼：

npm install redux-thunk
或
yarn add redux-thunk安裝中間件

創(chuàng)建action的函數(shù)不再返回一個一般對象，而是返回一個函數(shù)，該函數(shù)中寫異步任務；

異步任務有結(jié)果后，使用store傳入的dispatch參數(shù)分發(fā)一個同步的action去真正操作數(shù)據(jù)

備注：異步action不是必須要寫的，完全可以自己在組件中等待異步任務的結(jié)果之后再去分發(fā)同步action。

 到此這篇關(guān)于Redux中異步action與同步action的使用的文章就介紹到這了,更多相關(guān)Redux 異步action與同步action內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論