直接上代码
export default function compose(...funcs) {
if (funcs.length === 0) {
return arg => arg
}
if (funcs.length === 1) {
return funcs[0]
}
return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
核心在最后一行，用到了数组的reduce，reduce千万不能看mdn的定义，会云里雾里的，我就在这里百思不得其姐，我们直接来看看一个数字对象的运行结果
var bb= a.reduce((a, b) => {
console.log('a:',a,';b:', b)
return a
})
image.png
由结果可知，b是不断地进行数组遍历的，a暂且理解成是上一次执行之后返回的结果，我们来确认下是不是这样
var list = [12, 24, 34, 45, 53]
var result= list.reduce((a, b) => {
console.log('a:',a,';b:', b)
return a + b
})
console.log('result:', result)
image.png
果然如此，接下来我们把数字数组改为函数，看看执行结果
function A() {
console.log(1)
}
function B() {
console.log(2)
}
function C() {
console.log(3)
}
function D() {
console.log(4)
}
[A, B, C, D].reduce((a,b)=>{
a()
b()
return a
})
image.png
假如不返回，会有什么结果
image.png
提示a不存在了，因为第一次之后没返回
有了以上的基本知识后，我们再来看看compose的核心代码
funcs.reduce((a, b) => (...args) => a(b(...args)))
由代码可知，每次都返回了一个方法，而这个方法实现的效果是，每一次循环，把当前的节点方法执行之后的结果作为下一个循环节点的输入，假如有这么个数组[fun1,fun2,func3]，那么执行了了compose之后，会类似下面的结果
fun1(fun2(func3))
这就好比洋葱，由里而外一层层的执行
那么，在redux中，我们怎么去理解它呢，其实，它主要用在applyMiddleware中，由createStore我们知道，中间件就是增强store功能的一个方式，比如支持异步，打印日志等
我们再来看写一个实例，来理解一下这个增强器是怎么实现的
有如下的一个对象
{ dispatch: {}, store: 'default state' }
目前dispatch是空对象，我们希望执行一些方法之后，它会多出一些属性，那么，可以按照下面的代码来实现
function compose(...funcs) {
if (funcs.length == 0) {
return
}
if (funcs.length == 1) {
return funcs[0]
}
return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
function A(param) {
param = JSON.parse(JSON.stringify(param))
console.log('a:', param)
param.dispatch.a = 'a'
return param
}
function B(param) {
param = JSON.parse(JSON.stringify(param))
console.log('b:', param)
param.dispatch.b = 'b'
return param
}
function C(param) {
param = JSON.parse(JSON.stringify(param))
console.log('c', param)
param.dispatch.c = 'c'
return param
}
var s = compose(A, B, C)
s({ dispatch: {}, store: 'default state' })
来看看执行的效果
image.png
这就是redux中中间件的基本思路了
