它提供了一个分类处理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。
网友评论