compose

compose 是 Redux 中的一个辅助函数，用于将多个函数组合成一个单一的函数。它按照从右到左的顺序依次执行这些函数，并且每个函数都可以接收前一个函数的结果作为参数。这个功能在应用中间件时特别有用，因为它可以让我们将多个中间件串联起来，形成一个完整的处理链。

简化版 compose 源码

下面是一个简化版的 compose 函数实现：

function compose(...funcs) {
  if (funcs.length === 0) {
    // 如果没有传入任何函数，则返回一个恒等函数（identity function）
    return (arg) => arg;
  }

  if (funcs.length === 1) {
    // 如果只传入了一个函数，则直接返回该函数
    return funcs[0];
  }

  // 对于多个函数，使用 reduceRight 方法从右向左依次执行它们
  return funcs.reduceRight(
    (composed, f) =>
      (...args) =>
        f(composed(...args))
  );
}

解释

1. 处理空数组：

   • 如果 compose 没有接收到任何函数（即 funcs.length === 0），它会返回一个恒等函数 (arg) => arg。这个恒等函数的作用是简单地返回传入的参数，而不做任何改变。这是为了确保即使没有中间件，也不会影响正常的 dispatch 流程。

2. 处理单个函数：

   • 如果 compose 只接收到一个函数（即 funcs.length === 1），它会直接返回这个函数。这避免了不必要的包装和调用开销。

3. 处理多个函数：

   • 当 compose 接收到多个函数时，它使用 reduceRight 方法从右向左依次组合这些函数。
   • reduceRight 的作用是从数组的最后一个元素开始，逐步向左遍历，累积结果。对于每一个函数 f 和累积的结果 composed，它创建一个新的函数，这个新函数接受任意数量的参数 ...args，然后先调用 composed(...args) 得到结果，再将这个结果传递给 f。
   • 这样就实现了从右到左依次执行函数的效果。

使用示例

示例：组合多个函数

// 定义一些简单的函数
const addOne = (x) => x + 1;
const double = (x) => x * 2;
const square = (x) => x * x;

// 使用 compose 组合这些函数
const composedFunction = compose(square, double, addOne);

console.log(composedFunction(3)); // 输出: ((3 + 1) * 2)^2 = 4^2 = 16

在这个例子中，compose(square, double, addOne) 创建了一个新的函数，它首先对输入值加 1，然后乘以 2，最后计算平方。因此，composedFunction(3) 的计算过程是：

1. addOne(3) 结果为 4
2. double(4) 结果为 8
3. square(8) 结果为 64

示例：在 Redux 中使用 compose

在 Redux 中，compose 主要用于组合多个中间件或增强器（enhancers）。例如，在应用中间件时：

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import logger from "redux-logger";
import rootReducer from "./reducers";

// 使用 compose 组合多个中间件
const storeEnhancer = compose(applyMiddleware(thunk), applyMiddleware(logger));

// 创建 Store 并应用增强器
const store = createStore(rootReducer, storeEnhancer);

export default store;

在这个例子中，compose 将 applyMiddleware(thunk) 和 applyMiddleware(logger) 组合成一个单一的增强器 storeEnhancer，然后将其应用于 createStore。

总结

• compose 的作用：将多个函数组合成一个单一的函数，按照从右到左的顺序依次执行。
• 应用场景：在 Redux 中主要用于组合多个中间件或增强器，以便于扩展和定制 Redux 的功能。
• 实现原理：通过 reduceRight 方法从右向左依次组合函数，确保每个函数都能接收到前一个函数的结果作为参数。