解讀 Redux 中介軟體的原理

redux 的中介軟體提供的是位於action被發起之後，到達reducer之前的擴充套件點，換而言之，原本view -> action -> reducer -> store的資料流加上中介軟體後變成了view -> action -> middleware -> reducer -> store，在這一環節我們可以做一些「***」的操作，如非同步請求、列印日誌等。

以日誌輸出 logger 為例：

'redux'

/** 定義初始 state**/

const initstate =

/** 定義 reducer**/

const reducer = (state, action) =>

default:

break

}}/** 定義中介軟體 **/

const logger = () => next => action =>

/** 建立 store**/

/** 現在嘗試傳送乙個 action**/

store.dispatch()

/** 列印:**/

// 【logger】即將執行:

// 【logger】執行完成後 state:

要理解上面這段**，首先要從建立store的createstore函式說起：

createstore函式接收引數為(reducer, [preloadedstate], enhancer)，其中preloadedstate為初始state，那麼enhancer又是什麼呢？從官方文件可以看到，storecreator的函式簽名為

type storecreator = (reducer: reducer, initialstate: ?state) => store

是乙個普通的建立store的函式，而enhancer的簽名為

type enhancer = (next: storecreator) => storecreator

可知enhancer是乙個組合storecreator的高階函式, 返回的是乙個新的強化過的storecreator，再執行storecreator就能得到乙個加強版的store。

export
default
function
return
(createstore) => (reducer, preloadedstate, enhancer) => 
// 註冊中介軟體呼叫鏈，並由此可知，所有的中介軟體最外層函式接收的引數都是
chain = middlewares.map(middleware => middleware(middlewareapi))
//compose 函式起到**組合的作用：compose(f, g, h)(...args) 效果等同於 f(g(h(...args)))，具體實現可參見附錄。從此也可見：所有的中介軟體最二層函式接收的引數為 dispatch，一般我們在定義中介軟體時這個形參不叫 dispatch 而叫 next，是由於此時的 dispatch 不一定是原始 store.dispatch，有可能是被包裝過的新的 dispatch。
dispatch = compose(...chain)(store.dispatch)
// 返回經 middlewares 增強後的 createstore
return 
}}

這樣下來，原來執行dispatch(action)的地方變成了執行新函式

(action)=>

這樣就實現了action -> reducer的攔截，所以每次觸發action都能被 log 出來了，

解讀 Redux 中介軟體的原理

解讀 Redux 中介軟體的原理

redux中介軟體原理

Redux中介軟體的原理

解讀 Redux 中介軟體的原理

解讀 Redux 中介軟體的原理

redux中介軟體原理

Redux中介軟體的原理

相關推薦