Redux中間件的使用方法教程
前言
- 在Express框架中,middleware是指可以被嵌入在框架接收請求到產(chǎn)生響應(yīng)過程中的代碼。
- 在Redux中,middleware提供的是位于action被發(fā)起后,到達(dá)reducer之前的擴(kuò)展點(diǎn)
Q: 中間件的代碼什么時(shí)候被調(diào)用?
A: 在 action 被發(fā)起之后,到達(dá) reducer 之前。
下面用流程圖來解釋middleware:

應(yīng)用
如何創(chuàng)建一個(gè)中間件
首先,Redux中間件的形式為一個(gè)柯里化的函數(shù)。
function exampleMiddleware(storeAPI) {
return function wrapDispatch(next) {
return function handleAction(action) {
// 在這里做你想做的事情,做完后,通過返回next(action)向下一個(gè)middleware傳遞action
return next(action)
}
}
}
- 最外層的
exampleMiddleware函數(shù)將會(huì)被applyMiddleware直接調(diào)用,并傳入一個(gè)包含dispatch()和getState()的對(duì)象作為參數(shù) - 調(diào)用
storeAPI.dispatch(action)時(shí),它會(huì)將操作發(fā)送到中間件鏈的開頭,重新執(zhí)行所有的中間件 - 中間層的
wrapDispatch函數(shù)接收一個(gè)名為next的函數(shù)作為其參數(shù)。這個(gè)函數(shù)實(shí)際上是中間件鏈中的下一個(gè)中間件。如果這個(gè)中間件是序列中的最后一個(gè),那么next函數(shù)實(shí)際上是原始的store.dispatch函數(shù)。調(diào)用next(action)會(huì)將action傳遞給中間件鏈中的下一個(gè)中間件 - 最后,
handleAction函數(shù)接收當(dāng)前action作為其參數(shù),并在每次dispatch(action)時(shí)調(diào)用
可以使用ES6的箭頭函數(shù)簡化此函數(shù):
const exampleMiddleware = store => next => action => {
return next(action)
}
如何應(yīng)用中間件
Redux 中間件實(shí)際上是在 Redux 內(nèi)置的一個(gè)非常特殊的存儲(chǔ)增強(qiáng)器之上實(shí)現(xiàn)的,稱為 applyMiddleware。
import { createStore, applyMiddleware } from 'redux'
import rootReducer from './reducer'
import { print1, print2, print3 } from './exampleAddons/middleware'
const middlewareEnhancer = applyMiddleware(print1, print2, print3)
const store = createStore(rootReducer, middlewareEnhancer)
export default store
原理
Redux 如何裝載Middleware
相關(guān)源碼:
applyMiddleware和Compose函數(shù)的執(zhí)行過程:
// 省略了中間代碼并去除typescript類型,并將Compose和applyMiddleware函數(shù)放在一起便于展示
function compose(...funcs) {
// 沒有傳入middleware,直接返回
if (funcs.length === 0) {
return (arg) => arg
}
// 傳入一個(gè)middleware,無需構(gòu)造,直接返回
if (funcs.length === 1) {
return funcs[0]
}
// 進(jìn)行函數(shù)柯里化返回一個(gè)形如:fn1(fn2(fn3(store.dispatch))) 的新dispatch函數(shù)
return funcs.reduce(
(a, b) =>
(...args: any) =>
a(b(...args))
)
}
function applyMiddleware(...middlewares){
return (createStore) => (reducer, preloadedState) => {
// createStore中檢測到由applyMiddleware函數(shù)生成的enhancer時(shí),將createStore、reducer、initialState傳入,在函數(shù)中創(chuàng)建一個(gè)臨時(shí)的store
const store = createStore(reducer, preloadedState)
// 創(chuàng)建一個(gè)臨時(shí)的dispatch函數(shù),此函數(shù)拋出異常,用于防止處理傳入的middlewares時(shí)提前調(diào)用dispatch
let dispatch = () => {
throw new Error(
'Dispatching while constructing your middleware is not allowed. ' +
'Other middleware would not be applied to this dispatch.'
)
}
// 給middleware分發(fā)store
const middlewareAPI = {
getState: store.getState,
dispatch: (action, ...args) => dispatch(action, ...args)
}
// 讓每個(gè)middleware帶著middlewareAPI這個(gè)參數(shù)執(zhí)行一遍,然后獲得帶著相同的store的middlewares
const chain = middlewares.map(middleware => middleware(middlewareAPI))
// 將所有chain中的函數(shù)利用Compose函數(shù)組裝成一個(gè)新的dispatch函數(shù)
// 如:dispatch=fn1(fn2(fn3(store.dispatch)))
dispatch = compose(...chain)(store.dispatch)
// 將生成的dispatch函數(shù)整合到剛才生成的store中并返回
return {
...store,
dispatch
}
}
}當(dāng)我們調(diào)用store.dispatch(action)時(shí),我們實(shí)際上是在調(diào)用管道中的第一個(gè)中間件。然后,該中間件可以在收到action時(shí)做任何它想做的事情,并在做完該事情后將action傳給下一個(gè)中間件繼續(xù)處理,直到所有中間件處理完成,調(diào)用原始的dispatch函數(shù)將action提交給reducer處理引發(fā)state變化
到此這篇關(guān)于Redux中間件的使用方法教程的文章就介紹到這了,更多相關(guān)Redux中間件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React使用高德地圖的實(shí)現(xiàn)示例(react-amap)
這篇文章主要介紹了React使用高德地圖的實(shí)現(xiàn)示例(react-amap),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
React實(shí)現(xiàn)類似于Vue中的插槽的項(xiàng)目實(shí)踐
本文主要介紹了React實(shí)現(xiàn)類似于Vue中的插槽的項(xiàng)目實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05
教你如何實(shí)現(xiàn)在react項(xiàng)目中嵌入Blazor
這篇文章主要介紹了如何實(shí)現(xiàn)在react現(xiàn)有項(xiàng)目中嵌入Blazor,通過這個(gè)案例我們可以知道 blazor也可以像react那樣嵌入在任何的現(xiàn)有項(xiàng)目中,并且使用方便,需要的朋友可以參考下2023-01-01
React如何使用sortablejs實(shí)現(xiàn)拖拽排序
這篇文章主要介紹了React如何使用sortablejs實(shí)現(xiàn)拖拽排序問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01
React?Native系列之Recyclerlistview使用詳解
這篇文章主要為大家介紹了React?Native系列之Recyclerlistview使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10
使用 React hooks 實(shí)現(xiàn)類所有生命周期
react 自 16.8 開始,引入了 Hooks 概念,使得函數(shù)組件中也可以擁有自己的狀態(tài),并且可以模擬對(duì)應(yīng)的生命周期,這篇文章主要介紹了使用 React hooks 怎么實(shí)現(xiàn)類里面的所有生命周期,需要的朋友可以參考下2023-02-02
react在安卓中輸入框被手機(jī)鍵盤遮擋問題的解決方法
這篇文章主要給大家介紹了關(guān)于react在安卓中輸入框被手機(jī)鍵盤遮擋問題的解決方法,文中通過圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧2018-09-09
React Native如何消除啟動(dòng)時(shí)白屏的方法
本篇文章主要介紹了React Native如何消除啟動(dòng)時(shí)白屏的方法,詳細(xì)的介紹了解決的方法,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08

