異步action

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

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

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

中間件（Middleware）：redux-thunk

安裝中間件：

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

引入中間件：

既然中間件是配合store使用的，那么當(dāng)然是在store中引入并使用這個(gè)中間件

store.js:

/* 
  該文件專門用于暴露一個(gè)store對(duì)象，整個(gè)應(yīng)用只有一個(gè)store對(duì)象
*/
// 引入createStore，專門用于創(chuàng)建redux中最為核心的store對(duì)象
import { legacy_createStore as createStore, applyMiddleware } from 'redux';
// 引入為Count組件服務(wù)的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時(shí)，將applyMiddleware傳入作為createStore的第二個(gè)參數(shù)；

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

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

這樣一來，store就會(huì)在接收到一個(gè)函數(shù)類型的action時(shí)，去調(diào)用這個(gè)action對(duì)應(yīng)的函數(shù)。

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

count_action_creator.js:

/* 
  該文件專門為Count組件生成action動(dòng)作對(duì)象
*/
import { INCREMENT, DECREMENT } from './constant'
// 同步action，就是指action的值為Object對(duì)象
export const createIncrementAction = data => ({ type: INCREMENT, data })
// ({ type: 'increment', data }) 相當(dāng)于 { 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)用這個(gè)函數(shù)：

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

異步action總結(jié)：

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

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

具體編碼：

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

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

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

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

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

最新評(píng)論