三分钟掌握redux的compose方法

背景

最近在用react写一个项目的时候添加redux,用到了redux中的compose函数，使用compose来增强store，下面是我在项目中的一个应用:

看到了使用了compose方法，有点感兴趣，想弄清楚他是怎么运行，字面意思理解是聚合，意思就是将多个函数当做参数传过去，进行执行

compose的作用

可以看到上述代码，把复杂的多函数嵌套调用，组合成纯粹的函数调用，实现
fn1(fn2(fn3(fn3(...args))))-->compose(fn1,fn2,fn3,fn4)(...args)这样单纯可读的函数调用方式

源码

下面这是github redux项目中 compose.js中的源码 compose方法

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方法，但一瞅上面的代码虽然仅仅8行代码，还是有一点点懵的，仔细一看它的核心代码其实也就那么一行

return funcs.reduce((a, b) => (...args) => a(b(...args)))

分析理解

看着这一行简洁到极致的代码，有点头疼，就想想看他的执行过程是咋样的，一头雾水，还是怪自己逻辑思维有点差，不得已隔鸡只能模拟一下，一步步进行分析

let str = 1
function add1(str) {return str + 1}
function add2(str) { return str + 2}
function add3(str) { return str + 3}

// 假设我这里想求得这样的值
let a = add1(add2(add3(str))) // 1 + 3 + 2 + 1  = 7

// 根据compose的功能，我们可以把上面的这条式子改成如下：
let composeFn = compose(add1,add2,add3)(str)// 理论上也应该得到7

componse执行返回一个函数
componse的参数为函数，返回的函数执行的时候实现了参数函数从右向左依次执行且每一个参数函数执行的结果为下一参数函数执行的入参，返回函数执行传入的参数作为第一次执行的参数函数的入参

看执行过程

第几轮循环	a的值	b的值	返回的值
第一轮循环	add1	add2	(...args) => add1(add2(...args)))
第二轮循环	(...args) => add1(add2(...args)))	add3	(...args) => add1(add2(add3(...args))))

总结

因此执行下来加上参数最后变成 add1(add2(add3(1)))) 这样执行，其实意思就是写个函数能将多个函数进行组合成一个函数，就是一元链式函数