Redux中間件的使用方法教程

更新時間：2023年01月31日 09:19:18 作者：綠胡子大叔

中間件就是一個函數(shù)，對store.dispatch方法進行了改造，在發(fā)出 Action 和執(zhí)行 Reducer 這兩步之間，添加了其他功能，要理解中間件，關(guān)鍵點是要知道，這個中間件是連接哪些部分的軟件，它在中間做了什么事，提供了什么服務(wù)

前言

在Express框架中，middleware是指可以被嵌入在框架接收請求到產(chǎn)生響應(yīng)過程中的代碼。
在Redux中，middleware提供的是位于action被發(fā)起后，到達reducer之前的擴展點

Q: 中間件的代碼什么時候被調(diào)用？

A: 在 action 被發(fā)起之后，到達 reducer 之前。

下面用流程圖來解釋middleware：

應(yīng)用

如何創(chuàng)建一個中間件

首先，Redux中間件的形式為一個柯里化的函數(shù)。

function exampleMiddleware(storeAPI) {
  return function wrapDispatch(next) {
    return function handleAction(action) {
      // 在這里做你想做的事情，做完后，通過返回next(action)向下一個middleware傳遞action
      return next(action)
    }
  }
}

最外層的exampleMiddleware函數(shù)將會被applyMiddleware直接調(diào)用，并傳入一個包含dispatch()和getState()的對象作為參數(shù)
調(diào)用storeAPI.dispatch(action)時，它會將操作發(fā)送到中間件鏈的開頭，重新執(zhí)行所有的中間件
中間層的wrapDispatch函數(shù)接收一個名為next的函數(shù)作為其參數(shù)。這個函數(shù)實際上是中間件鏈中的下一個中間件。如果這個中間件是序列中的最后一個，那么next函數(shù)實際上是原始的store.dispatch函數(shù)。調(diào)用next(action)會將action傳遞給中間件鏈中的下一個中間件
最后，handleAction函數(shù)接收當(dāng)前action作為其參數(shù)，并在每次dispatch(action)時調(diào)用

可以使用ES6的箭頭函數(shù)簡化此函數(shù)：

const exampleMiddleware = store => next => action => {
  return next(action)
}

如何應(yīng)用中間件

Redux 中間件實際上是在 Redux 內(nèi)置的一個非常特殊的存儲增強器之上實現(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)源碼：

redux/src/createStore.ts

redux/src/applyMiddleware.ts

redux/src/compose.ts

applyMiddleware和Compose函數(shù)的執(zhí)行過程：

// 省略了中間代碼并去除typescript類型，并將Compose和applyMiddleware函數(shù)放在一起便于展示
function compose(...funcs) {
	// 沒有傳入middleware，直接返回
	if (funcs.length === 0) {
	  return (arg) => arg
	}
	// 傳入一個middleware，無需構(gòu)造，直接返回
	if (funcs.length === 1) {
	  return funcs[0]
	}
	// 進行函數(shù)柯里化返回一個形如：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時，將createStore、reducer、initialState傳入，在函數(shù)中創(chuàng)建一個臨時的store
		const store = createStore(reducer, preloadedState)
		// 創(chuàng)建一個臨時的dispatch函數(shù)，此函數(shù)拋出異常，用于防止處理傳入的middlewares時提前調(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)
		}
		// 讓每個middleware帶著middlewareAPI這個參數(shù)執(zhí)行一遍，然后獲得帶著相同的store的middlewares
		const chain = middlewares.map(middleware => middleware(middlewareAPI))
		// 將所有chain中的函數(shù)利用Compose函數(shù)組裝成一個新的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)時，我們實際上是在調(diào)用管道中的第一個中間件。然后，該中間件可以在收到action時做任何它想做的事情，并在做完該事情后將action傳給下一個中間件繼續(xù)處理，直到所有中間件處理完成，調(diào)用原始的dispatch函數(shù)將action提交給reducer處理引發(fā)state變化

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

您可能感興趣的文章: