prefacio

En el marco Express, el middleware se refiere al código que se puede incrustar en el marco desde que recibe una solicitud hasta que genera una respuesta.
En Redux, el middleware proporciona un punto de extensión después de que se inicia la acción y antes del reductor

P: ¿Cuándo se llama el código de middleware?
R: Después de iniciada la acción, antes de llegar al reductor.

A continuación se utiliza un diagrama de flujo para explicar el middleware:

solicitud

Cómo crear un software intermedio

Primero, la forma del middleware Redux es una función curry.

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

La exampleMiddlewarefunción más externa será applyMiddlewarellamada directamente, pasando un objeto que contiene dispatch()ygetState()
Cuando se llama storeAPI.dispatch(action), envía la acción al comienzo de la cadena de middleware, volviendo a ejecutar todo el middleware
Una función en la capa intermedia wrapDispatchrecibe una nextfunción nombrada como su argumento. Esta función es en realidad el siguiente middleware en la cadena de middleware. Si este middleware es el último de la secuencia, la función es en realidad la función nextoriginal . store.dispatchLa llamada next(action)pasará actional siguiente middleware en la cadena de middleware
Finalmente, handleActionla función recibe la corriente actioncomo argumento y dispatch(action)es llamada cada vez

Esta función se puede simplificar usando las funciones de flecha de ES6:

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

Cómo aplicar el software intermedio

El middleware de Redux en realidad se implementa sobre un potenciador de tienda muy especial integrado en Redux llamado 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

principio

Cómo Redux carga Middleware

Código fuente relacionado:
redux/src/createStore.ts
redux/src/applyMiddleware.ts
redux/src/compose.ts

El proceso de ejecución de las funciones applyMiddleware y 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
		}
	}
}

Cuando llamamos store.dispatch(action), en realidad estamos llamando al primer middleware en la canalización. Luego, el middleware puede actionhacer lo que quiera cuando lo recibe, y una vez hecho esto, se pasará actional siguiente middleware para continuar con el procesamiento hasta que se complete todo el procesamiento del middleware, y la llamada a la dispatchfunción original se actionenviará reduceral procesamiento causa statecambio

Notas de estudio de React: el método de uso y el principio del middleware Redux