Redux 中介軟體

什麼是中介軟體？

中介軟體本質上就是一個函式，Redux允許我們透過中介軟體的方式，擴充套件和增強Redux應用程式，增強體現在對action處理能力上，之前的計數器與彈出框案例中。actions都是直接被reducer函式處理的，再加入了中介軟體以後，在出發了一個action之後這個action會優先被中介軟體處理，當中間處理完這個action以後，中介軟體會把這個action傳遞給reducer，讓reducer繼續處理

加入了中介軟體Redux 工作流程

開發Redux 中介軟體

開發中間件模版程式碼，本質上是一個函式，並且是一個科裡化的一個函式

export default store => next => action => {}

這個函式中要求我們返回一個函式，在這個返回的函式中要求我們再返回一個函式，在最裡層的函式中我們可以執行我們自己的業務邏輯，在最外層的函式中給我們提供了一個引數叫store，可以用store。getState獲取當前state狀態，也可以使用store。dispatch來觸發另外一個action，至於幹什麼具體根據使用的業務邏輯來決定。在最裡層的函式也有一個形參，這個形參就是元件觸發的action物件，可以根據action。type來決定是否對當前action進行處理。中間的函式也有一個引數，這個引數是一個函式，我們稱之為next，在我們執行完了邏輯程式碼之後，我們要去呼叫next方法，把當前action 傳遞給reducer，或者說傳遞給下一個中介軟體，因為中介軟體可以有多個。中介軟體開發好之後需要引入我們寫的中介軟體並且註冊給redux。

註冊中介軟體

import { createStore， applyMiddleware } from ‘redux’import logger from ‘。/middlewares/logger’createStore（reducer， applyMiddleware（ logger））

開發一箇中間件

實現一個列印每次action操作的中介軟體

新建 src/store/middleware/logger。js 檔案，在這個檔案中匯出一箇中間件我們這裡列印上

// eslint-disable-next-line import/no-anonymous-default-exportexport default store => next => action => { console。log（store。getState（）） console。log（action） // next 必須呼叫並且必須傳第 action next（action）}

在store/index。js 中註冊中介軟體

import logger from ‘。/middleware/logger’import { applyMiddleware } from ‘redux’export const store = createStore（RootReducer， applyMiddleware（logger））

這個時候中介軟體就可以使用了，執行專案可以看到中介軟體已經開始工作了，單箇中間件已經註冊好了，那麼多箇中間件怎麼註冊呢，多箇中間件的執行順序又是怎麼樣的呢，多箇中間件就是在applyMiddleware的多個引數

我們新建 src/store/middleware/test。js 檔案註冊另一箇中間件這個test中介軟體列印一句話，並在store/index。js來註冊中介軟體，並交換註冊順序來檢視中介軟體執行順序

//src/store/middleware/test。jsexport default store => next => action => { console。log（‘test 中介軟體’） next（action）}// src/store/index。jsimport { createStore } from ‘redux’；import RootReducer from ‘。/reducers/root。reducers’import { applyMiddleware } from ‘redux’import logger from ‘。/middleware/logger’import test from ‘。/middleware/test’export const store = createStore（RootReducer， applyMiddleware（test ，logger））

從上可以看出中介軟體的執行順序就是註冊順序

透過中介軟體開發例項thunk

計數器新需求

點選+-按鈕的時候延時2秒再執行

思路：在中介軟體攔截加減操作的 action 等到事件到了之後再執行next方法

新建src/store/middleware/thunk。js 中介軟體，在這個中介軟體中攔截 +- 操作的action 延遲兩秒再執行next方法，並在store/index。js檔案中註冊這個中介軟體

// src/store/middleware/thunk。jsimport { INCREMENT， DECREMENT } from ‘。/。。/const/counter。const’export default store => next => action => { if （action。type === INCREMENT || action。type === DECREMENT） { setTimeout（（） => { next（action） }， 2000） }else{ next（action） }}// src/store/index。js 註冊中介軟體import thunk from ‘。/middleware/thunk’export const store = createStore（RootReducer， applyMiddleware（test， logger， thunk））

這裡雖然可以實現這個延遲執行這個功能，但是程式碼還不夠靈活。中介軟體只關注是非同步還是同步操作這樣程式碼就靈活多了

改造中介軟體

當這個中介軟體函式不關心你想執行什麼非同步操作，只關心你執行的是不是非同步操作

如果你執行的是非同步操作，再你觸發action的時候，給中介軟體傳遞一個函式，如果執行的是同步操作就傳遞一個正常action物件

非同步操作程式碼要寫在傳遞進來的函式中

當前這個中介軟體的函式在點用你傳遞進來的函式時，要將dispatch方法傳遞進去

import { INCREMENT， DECREMENT } from ‘。/。。/const/counter。const’export default store => next => action => { if （typeof action === ‘function’） { return action（store。dispatch） } next（action）}

在action中去新增加非同步函式，並在檢視中繫結事件的時候繫結非同步函式

// src/store/actions/counter。actions。jsexport const increment_async = payload => dispatch => { setTimeout（（） => { dispatch（increment（payload）） }， 2000）；}// src/components/Count。js檢視中更改繫結的事件function Count（{count，increment_async，decrement}） { return

{count}

}

這樣我們並序需要在中介軟體中做具體非同步操作，只需要在中介軟體中判斷是非同步還是同步操作，非同步操作時執行我們傳遞進來的函式並傳遞 dispatch 給我們傳遞的非同步函式，在非同步函式中執行非同步操作，並去觸發真正的action動作

原文地址：https：//kspf。xyz/archives/20/