redux源码浅析之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，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中中间件的基本思路了

redux源码浅析之compose

推荐阅读更多精彩内容