redux源码解读--compose源码解析
compose源码解析
compose模块的代码十分简练，但是实现的作用却是十分强大。redux为何称为redux？有人说就是reduce和flux的结合体，而reduce正是compose模块的核心。
compose模块所实现的功能强大而简单：从右到左,组合参数(函数)。所以，传递给compose方法的参数，必须都是函数类型的(这一点，在源码中没有判断，可能是因为这个模块是redux内部使用的模块，没有对外暴露，所以不需要很强的校验。)。例如：
compose(f, g, h) ====> (...args) => f(g(h(...args)))
模块的代码很简单，但是涉及到的内容却很重要，下面一点一点的看。
reduce是什么？
reduce是es5中的数组的一个方法，对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。函数签名为：
arr.reduce(callback[, initialValue])
callback是执行数组中每个元素的函数，这个函数接收几个参数：
- accumulator:上一次callback调用的返回值，如果是第一次调用，则这个值就是initialValue。如果没有提供initialValue则使用数组的第一个元素。
- currentValue: 数组正在处理的元素
- currentIndex: 数组正在处理的元素的当前的索引
- array: 调用reduce方法的数组
综上，reduce方法详细的签名就是：
arr.reduce(function (accumulator, currentValue, currentIndex, array) {}[, initialValue])几个小Demo
- 数组求和
[1,2,3,4,5].reduce((a, b) => a + b) // 15
- 数组拉平
[[0, 1], [2, 3], [4, 5]].reduce((a, b) => {
return a.concat(b);
}, []); // [ 0, 1, 2, 3, 4, 5 ]关于reduce详细的文档可以参考Array.prototype.reduce
明白了reduce是怎么回事之后，我们先来看一下compose有什么神奇的效果：
import compose from '../src/compose'
// function f
const f = (arg) => `函数f(${arg})`
// function g
const g = (arg) => `函数g(${arg})`
// function h 最后一个函数可以接受多个参数
const h = (...arg) => `函数h(${arg.join('_')})`
const r = compose(f, g, h)
console.log(typeof r) // function
console.log(r(1,2,3)) //函数f(函数g(函数h(1_2_3)))从上面可以的代码可以看出：compose的运行结果是一个函数，调用这个函数所传递的参数将会作为compose最后一个参数的参数，从而像'洋葱圈'似的，由内向外，逐步调用。
源码
export default function compose(...funcs) {
// funcs是一个保存着所有参数函数的数组
// 如果没有传递任何参数，就返回一个函数，这个函数是输入什么得到什么。
if (funcs.length === 0) {
return arg => arg
}
// 只传递一个参数的时候，就直接把这个函数返回
if (funcs.length === 1) {
return funcs[0]
}
// 返回组合函数
return funcs.reduce((a, b) => (...args) => a(b(...args)))
}这就是对compose源码的一个整体解读，水平有限，欢迎拍砖。后续的源码解读和测试例子可以关注：redux源码解读仓库