redux原理——ruduce函数和compose函数

reduce()合并函数核心：每次的返回值是一个函数，再用该函数去执行下一个数组元素（数组元素先执行传入参数返回）

讲redux之前首先要理解一个函数-----reduce()

语法
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数说明：
一、function(total,currentValue, index,arr)	必需。用于执行每个数组元素的函数。
    函数参数:
    total	必需。初始值, 或者计算结束后的返回值。
    currentValue	必需。当前元素
    currentIndex	可选。当前元素的索引
    arr	可选。当前元素所属的数组对象。

二、initialValue	可选。传递给函数的初始值

reduce()函数有两种用法，一般我们只用到了第一种，即累加（这里不再举例）

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

还有一种比较高级的用法：

reduce() 可以作为一个高阶函数，用于函数的 compose。

注：意思就是写个函数能将多个函数进行组合成一个函数，就是一元链式函数

注意: reduce() 对于空数组是不会执行回调函数的。

例子：这里想到了数组的reduce()函数

实现思路：要想实现一个这样的函数，肯定是需要有一个遍历的过程，一个函数的执行结果是另一个函数的参数，那这样就需要有个累计的过程，综合以上2点，想到数组中有个reduce函数。这里我们来看看reduce函数

接下来实现：chained函数

function chained(funcs) {
  return function(input){
    return funcs.reduce(function(input, fn){ return fn(input) }, input);
  }
}

chained([f3,f2,f1])(2) //调用

函数解析：分为以下4个步骤解析

chained函数入参：funcs 函数数组返回值：入参为input的函数（这里称为链式回调函数）

链式回调函数：入参：input 初始值返回值：reduce()函数 funcs 函数数组执行reduce（）函数

reduce函数：入参：计算函数和初始值

计算函数：function(input, fn){ return fn(input) }

首次入参：input输入值 fancs数组的第一个元素 fn1

二次入参：fn1(input)执行后返回值 fancs数组的第一个元素 fn1

...以此类推，知道fancs的数组元素全部参与执行

抽象理解：reduce 英文意思：减少；缩小

A.reduce(function(total, currentValue, currentIndex, arr), initialValue) 可以理解为逐渐减少数组A的元素，减少执行该过程是传给回调函数，用作新的入参，而减少后变为回调函数的另一个入参（即total返回值）

数组A元素变化示意图：元素 ====> 入参 ====>返回值 ====> 入参 ====>……====>最终合成结果

——————————————————————————————————————————————————————

compose函数：函数源码参见：https://github.com/reduxjs/redux/blob/v3.7.2/src/compose.js

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) => b(a(...args)))  //从左到右
}

将上面的写法转换为es5：

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) => b(a(...args)))

  //下面函数是返回的compose函数
  return funcs.reduce(
    
    //下面返回函数是reduce的回调函数 接收 入参 a, b 
    //a为fn1 ，b为fn2（没有传入初始值）
    function(a,b){

      //下面返回函数是reduce的回调函数实际执行函数
      return function(...args){ //这里...args指的是compose函数传入的参数
         var transferVal = a(...args)
         return b(transferVal)
      }
    }
  )
}

chained([f3,f2,f1])(2) //调用

执行过程说明：

我们一步一步分解一下, funcs 初始化的值为 funcs = [fn1,fn2,fn3], reduce执行

第一步时

　　a = fn1

　　b = fn2

...args = 2

b(a(2)) = fn2(fn1(2))

　　(2) => b(a(2)) = (2) = > fn2(fn1(2))

第二步时

a = (2) = > fn2(fn1(2)) // 避免和后面混淆，rest参数名修改为 ag

b = fn3

b(a(...args)) = fn3( a(...args) ) = fn3(fn2( fn1(...args) )) // 这一步是关键，a(...args)执行后作为b函数的入参，也就是 ...ag = fn3(...args)

　 (...args) => b(a(...args)) = (...args) = > fn3(fn2(fn1(...args)))

所以最后返回的就是这样的一个函数 (...args) = > fn3(fn2(fn1(...args)))

reduce()合并函数核心：每次的返回值是一个函数，再用该函数去执行下一个数组元素（数组元素先执行传入参数返回）

说明：这里是从左到右

从右到左写为 funcs.reduce((a, b) => (...args) => a(b(...args)))

redux原理——ruduce函数和compose函数

猜你喜欢