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,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,h)

console.log(typeof r) // function

console.log(r(1,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源码解读仓库

redux源码解读--compose源码解析

compose源码解析

猜你在找的React相关文章