前言
- 在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变化