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源码解读仓库