它提供了一个分类处理action的机会。在中间件中，可以检阅每个流过的action，挑选出特定类型的action进行相应的操作，提供一次改变action的机会。
通过中间件，我们可以在dispatch action之后，到达reducer之前，搞点事情。比如：打印，报错，跟异步API通信等等
下面，让我们一步步来理解下中间件是如何实现的：
我们从createStore.js调用中间件的地方开始理解：
export default function createStore(reducer, preloadedState, enhancer) {
// 如果第二个参数没有传入初始的state，而是传入了enhancer
// applyMiddleware调用的返回值, 那就将第二个参数，preloadedState赋值给enhancer
if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
enhancer = preloadedState
preloadedState = undefined
}
}
if (typeof enhancer !== 'undefined') {
if (typeof enhancer !== 'function') {
throw new Error('Expected the enhancer to be a function.')
}
// 当enhancer不为空且为函数时，就执行该函数，并return回去，作为creatStore的返回值。
return enhancer(createStore)(reducer, preloadedState)
}
理解middleware机制
redux提供了applyMiddleware方法来加载中间件，先来看下总览：
export default function applyMiddleware(...middlewares) {
return createStore => (...args) => {
const store = createStore(...args)
....
....
....
return {
...store,
dispatch
}
}
applyMiddleware接受不定数量的中间件，然后返回一个接受一个creatStore作为参数的函数的函数。回去再看下我们的creatStore:
if (typeof enhancer !== 'undefined') {
if (typeof enhancer !== 'function') {
throw new Error('Expected the enhancer to be a function.')
}
// 当enhancer不为空且为函数时，就执行该函数，并return回去，作为creatStore的返回值。
return enhancer(createStore)(reducer, preloadedState)
}
当enhancer不为空且为函数时，就执行该函数，并return回去，作为creatStore的返回值。回忆下我们在redux中怎样使用中间件的
const store = createStore(reducers, applyMiddleware(a, b, c));
其实enhancer就是applyMiddleware的结果。也就是createStore => (...args) => {}
export default function applyMiddleware(...middlewares) {
return createStore => (...args) => {
const store = createStore(...args)
// 声明一个dispatch
let dispatch = () => {
throw new Error(
`Dispatching while constructing your middleware is not allowed. ` +
`Other middleware would not be applied to this dispatch.`
)
}
const middlewareAPI = {
getState: store.getState,
dispatch: (...args) => dispatch(...args)
}
// 第一步把middlewares里的函数带着middlewareAPI这个参数都挨个执行，
//然后保存在chain数组中。也就是middleware中的第一个参数，返回 next => action => {...}
const chain = middlewares.map(middleware => middleware(middlewareAPI))
// 问题：compose是如何将中间件串联在一起的?
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
compose.js怎么组合函数的呢？
return funcs.reduce((a, b) => (...args) => a(b(...args)))
一脸蒙蔽，这是什么？
现在假设我们需要组合两个函数：
var f1 = function(a) {
return a * 10;
}
var f2 = function(a) {
return a + 1;
}
function compose(f1, f2) {
return function(x) {
return f1(f2(x))
}
}
var number = compose(f1, f2)(4)
让代码从右向左运行变成f1(f2(x))，4 -> f2 -> f1 -> 50
现在我们修改下compose函数
let compose = (...funs) => (result) => {
for (var i = funs.length - 1; i > -1; i--) {
result = funs[i].call(this, result);
}
return result;
}
var number = compose(f1, f2)(4)
我们再回到redux的compose.js
return funcs.reduce((a, b) => (...args) => a(b(...args)))
拆分上面的源码步骤如下：
- 返回
(...args) => a(b(...args)且与下一个c函数做计算 - a 等于
(...args) => a(b(...args)，b 等于 c 这个function ， 然后再一次做(...args) => a(b(...args))计算，就形成了(c(...args)) => a(b(...args))返回a(b(c(...args))) - 所以compose其实就是实现了组合运算
(...args) => f(g(h(...args))).
再回头看下applyMiddleware的方法：
export default function applyMiddleware(...middlewares) {
return createStore => (...args) => {
const store = createStore(...args)
// 声明一个dispatch
let dispatch = () => {
throw new Error(
`Dispatching while constructing your middleware is not allowed. ` +
`Other middleware would not be applied to this dispatch.`
)
}
const middlewareAPI = {
getState: store.getState,
dispatch: (...args) => dispatch(...args)
}
// 第一步把middlewares里的函数带着middlewareAPI这个参数都挨个执行，
//然后保存在chain数组中。也就是middleware中的第一个参数，返回 next => action => {...}
const chain = middlewares.map(middleware => middleware(middlewareAPI))
// 在中间件中调用dispatch的时候, 其实就是调用了这个dispatch,而不是一开始声明的逻辑
// 这个dispatch是已经经过compose的包装的函数
// const composeRes = compose(...chain);
// 第二行通过传入store.dispatch,
// 这个store.dispatch就是最后一个 next => action => {}的next参数
// 所以中间件其实就是改装dispatch
// dispatch作为有中间件的store的dispatch属性输出
// 当用户调用dispatch时, 中间件就会一个一个
// 执行完逻辑后, 将执行权给下一个, 直到原始的store.dispacth, 最后计算出新的state
// 问题：compose是如何将中间件串联在一起的?
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
总结下：
- 第一步把
middlewares数组里的函数带着middlewareAPI这个参数都挨个执行个遍且，且保存在chain数组中。也就是middleware中的第一个参数，返回next => action => {...} - 就是上面
composeJs中组合chain中的函数。变成f1(f2(f3(store.dispatch)))，
并且最终保存在dispatch 变量中。里面的函数最终会返回action => {...}这个函数,
作为上一个函数的next参数保存在上个函数的scope中，所以每个middleware 中必须执行next(action)才能进入下个middleware。
而最后一个middleware传入的next正是原始的store.dispatch。