Redux中间件的使用方法教程

目录

• 前言
• 应用
• 如何创建一个中间件
• 如何应用中间件
• 原理

前言

• 在Express框架中，middleware是指可以被嵌入在框架接收请求到产生响应过程中的代码。
• 在Redux中，middleware提供的是位于action被发起后，到达reducer之前的扩展点

Q: 中间件的代码什么时候被调用？

A: 在 action 被发起之后，到达 reducer 之前。

下面用流程图来解释middleware：

应用

如何创建一个中间件

首先，Redux中间件的形式为一个柯里化的函数。

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

• 最外层的exampleMiddleware函数将会被applyMiddleware直接调用，并传入一个包含dispatch()和getState()的对象作为参数
• 调用storeAPI.dispatch(action)时，它会将操作发送到中间件链的开头，重新执行所有的中间件
• 中间层的wrapDispatch函数接收一个名为next的函数作为其参数。这个函数实际上是中间件链中的下一个中间件。如果这个中间件是序列中的最后一个，那么next函数实际上是原始的store.dispatch函数。调用next(action)会将action传递给中间件链中的下一个中间件
• 最后，handleAction函数接收当前action作为其参数，并在每次dispatch(action)时调用

可以使用ES6的箭头函数简化此函数：

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

如何应用中间件

Redux 中间件实际上是在 Redux 内置的一个非常特殊的存储增强器之上实现的，称为 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

相关源码：

redux/src/createStore.ts

redux/src/applyMiddleware.ts

redux/src/compose.ts

applyMiddleware和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
		}
	}
}

当我们调用store.dispatch(action)时，我们实际上是在调用管道中的第一个中间件。然后，该中间件可以在收到action时做任何它想做的事情，并在做完该事情后将action传给下一个中间件继续处理，直到所有中间件处理完成，调用原始的dispatch函数将action提交给reducer处理引发state变化