avant-propos

Dans le framework Express, le middleware fait référence au code qui peut être intégré dans le framework depuis la réception d'une demande jusqu'à la génération d'une réponse.
Dans Redux, le middleware fournit un point d'extension après le lancement de l'action et avant le réducteur

Q : Quand le code middleware est-il appelé ?
R : Après le début de l'action, avant d'atteindre le réducteur.

Ce qui suit utilise un organigramme pour expliquer le middleware :

application

Comment créer un middleware

Premièrement, la forme du middleware Redux est une fonction curry.

function exampleMiddleware(storeAPI) {
    
    
  return function wrapDispatch(next) {
    
    
    return function handleAction(action) {
    
    
      // 在这里做你想做的事情，做完后，通过返回next(action)向下一个middleware传递action
      return next(action)
    }
  }
}

La exampleMiddlewarefonction la plus externe sera applyMiddlewareappelée directement, en passant un objet contenant dispatch()etgetState()
Lorsqu'il est appelé storeAPI.dispatch(action), il envoie l'action au début de la chaîne de middleware, ré-exécutant tous les middleware
Une fonction de la couche intermédiaire wrapDispatchreçoit une nextfonction nommée comme argument. Cette fonction est en fait le middleware suivant dans la chaîne middleware. Si ce middleware est le dernier de la séquence, nextla fonction est en fait la store.dispatchfonction d'origine. L'appel next(action)sera actiontransmis au middleware suivant dans la chaîne de middleware
Enfin, handleActionla fonction reçoit le courant actioncomme argument et dispatch(action)est appelée à chaque fois

Cette fonction peut être simplifiée à l'aide des fonctions fléchées d'ES6 :

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

Comment appliquer le middleware

Le middleware Redux est en fait implémenté au-dessus d'un amplificateur de magasin très spécial intégré à Redux appelé 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

principe

Comment Redux charge le middleware

Code source associé :
redux/src/createStore.ts
redux/src/applyMiddleware.ts
redux/src/compose.ts

Le processus d'exécution des fonctions applyMiddleware et Compose :

// 省略了中间代码并去除typescript类型，并将Compose和applyMiddleware函数放在一起便于展示

function compose(...funcs) {
    
    
	// 没有传入middleware，直接返回
	if (funcs.length === 0) {
    
    
	  return (arg) => arg
	}
	
	// 传入一个middleware，无需构造，直接返回
	if (funcs.length === 1) {
    
    
	  return funcs[0]
	}
	
	// 进行函数柯里化返回一个形如：fn1(fn2(fn3(store.dispatch))) 的新dispatch函数
	return funcs.reduce(
	  (a, b) =>
	    (...args: any) =>
	      a(b(...args))
	)
}

function applyMiddleware(...middlewares){
    
    
	return (createStore) => (reducer, preloadedState) => {
    
    
		// createStore中检测到由applyMiddleware函数生成的enhancer时，将createStore、reducer、initialState传入，在函数中创建一个临时的store
		const store = createStore(reducer, preloadedState)
		
		// 创建一个临时的dispatch函数，此函数抛出异常，用于防止处理传入的middlewares时提前调用dispatch
		let dispatch = () => {
    
    
			throw new Error(
			  'Dispatching while constructing your middleware is not allowed. ' +
			    'Other middleware would not be applied to this dispatch.'
			)
		}
		
		// 给middleware分发store
		const middlewareAPI = {
    
    
		  getState: store.getState,
		  dispatch: (action, ...args) => dispatch(action, ...args)
		}

		// 让每个middleware带着middlewareAPI这个参数执行一遍，然后获得带着相同的store的middlewares
		const chain = middlewares.map(middleware => middleware(middlewareAPI))

		// 将所有chain中的函数利用Compose函数组装成一个新的dispatch函数
		// 如：dispatch=fn1(fn2(fn3(store.dispatch)))
		dispatch = compose(...chain)(store.dispatch)
		
		// 将生成的dispatch函数整合到刚才生成的store中并返回
		return {
    
    
		  ...store,
		  dispatch
		}
	}
}

Lorsque nous appelons store.dispatch(action), nous appelons en fait le premier middleware du pipeline. Ensuite, le middleware peut actionfaire ce qu'il veut quand il le reçoit, et après cela, il sera actiontransmis au middleware suivant pour continuer le traitement jusqu'à ce que tout le traitement du middleware soit terminé, et l'appel à la dispatchfonction d'origine sera actionsoumis à reducerla le traitement cause statele changement

Notes d'étude React - la méthode d'utilisation et le principe du middleware Redux