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

Analysis

需要说明的是， compose 函数的存在其实是服务于中间件的，即当我们使用 applyMiddleware 实现功能增强的背后，其实就是利用了 compose 函数将这多个增强函数进行合理的组合。

首先， compose 函数利用了es6的rest参数，将多个类型为函数的参数收集到一个叫作 funcs 的数组中，然后进行进一步逻辑判断，最终结果都会是返回一个函数，保证输入输出。

来用例子说话吧：

// 初始数据
let data = 1;
// 加1函数
const add1 = v => v + 1;
// 乘2函数
const multi2 = v => v * 2;
// 1. compose没有参数
const func1 = compose();
func1(data); // -> 1
// 2. compose有一个参数，为add1
const func2 = compose(add1);
func2(data); // -> 2，运算顺序为 1 + 1
// 3. compose有两个参数，顺序依次为add1与multi2
const func3 = compose(add1, multi2);
func3(data); // -> 3，运算顺序为 1 * 2 + 1
// 4. compose有两个参数，顺序依次为multi2与add1
const func4 = compose(multi2, add1);
func4(data); // -> 4，运算顺序为 (1 + 1) * 2

这里重点关注一下 func3 与 func4 可以看出，接受参数相同但是顺序不同，也会导致结果的不同，很明显，越是在后面的函数，执行的次序越靠前，从源码中的 a(b(...args)) 也可以得到印证。

以上其实就是redux中间件的基本实现原理，关于中间件，我们后续再说。

Currying

聊完了 compose 这个组合函数，顺便来聊一下 柯里化 这个概念吧，因为这个概念在你编写自己的中间件的时候可能会涉及到，下面是来自于百度百科的解释：

在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。

如果需要举例，那么也很简单，就像这样子：

// 现在有个add函数接受两个参数a、b，并返回a + b
const add = (a, b) => a + b;
add(1, 2); // -> 3
// 现在用柯里化的思想来实现一下
const addByCurrying = a => b => a + b;
addByCurrying(1)(2); // -> 3

可以看到其实使用柯里化就是将原本接受多个参数的函数变为一次只接受一个参数，并返回一个新的函数用来处理剩余的函数，就像是 add 改写为 addByCurrying 后，实现一个 a+b 其实是利用了两个函数调用完成的，第一次接受1，第二次接受2。

讲完了柯里化的含义，那么为什么要费劲套这么多层去实现一个a+b？那肯定是有他的好处的，想了解具体的就移步这里—— 详解JS函数柯里化 ，感觉这篇文章中写的很清楚了。

相关推荐

Redux源码解析（2）

2023 春暖花开，万物复苏 生活不易，唉声叹气 redux5.0.0-alpha.2源码解析（二）

Redux源码中的那些奇技淫巧

前言 大家好这里是阳九,一个文科中途转行的野路子码农,热衷于研究和手写前端工具. 想必各位尊贵的React前端切图仔们或多或少都有用过大名鼎鼎的Redux状态管理器。 而这款状态管理器的源码也是出了名

• Redux JavaScript

[Redux 源码] 来聊聊 Redux

[Redux 源码] 来聊聊 Redux 和 React Redux 如同世界上的很多事情一样，Redux 也从昔日的 React 的大网红，逐渐退出前端的舞台。这很正常。Redux 也算完成了它的使

• JavaScript

redux源码-详解compose函数

在redux中如果我们想在dispatch或者其他store api中做一些其他事情，redux是支持我们加工store api并使用的。那么compose函数的作用是什么呢？

• luckydog Redux React.js

火爆全网的 Evil.js 源码解读

什么？黑心996公司要让你提桶跑路了？想在离开前给你们的项目留点小礼物？偷偷地把本项目引入你们的项目吧，你们的项目会有但不仅限于如下的神奇效果：当数组长度可以被7整除时……

• HullQin JavaScript

从应用到源码-深入浅出Redux

大家好，我是19组清风。今天为大家带来一篇没有任何注水的 Redux 从入门到精通的源码解读文章，希望可以帮助到大家。

• 19组清风 React.js

Redux 最佳实践 Redux Toolkit 🔥🔥

Redux Toolkit 的构建简化了大多数 Redux 任务，防止了常见错误，并使编写 Redux 应用程序变得更加容易。可以说 Redux Toolkit 就是目前 Redux 的最佳实践方式

• Redux React.js

字节一面，面试官问我Vue3源码，我说……

“哥，我面试字节挂了！” 小明哭丧着脸：“MD，太卷了！这 Vue3 刚转正没多久，面试官就问上我原理了，什么 reactivity 实现原理，proxy ，Vue3初始化的流程，编译优化，diff

• 阿崔cxr
• 19.6w
• Vue.js

全网最详细的Docker-Compose详细教程

docker compose是什么？ compose、machine 和 swarm 是docker 原生提供的三大编排工具。简称docker三剑客。 Docker Compose能够在 Docker

• 努力的IT小胖子 Docker

Flutter Fish_Redux 3.0起航！

作者：闲鱼技术——啊丘 序言 fish_redux 2.0 FlowAdapter 功能优化，整体业务落地后，我们着手fish_redux新一轮的优化与架构演进。fish_redux 3.x 版本最终

• Flutter

redux 中的 compose 与 applymiddleware

compose 方法 compose 函数定义 compose方法利用数组的 reduce 方法，将多个方法按照一定的顺序组合为一个方法，从而达到一种函数自动有序执行的效果。其中各个方法的执行的顺序取

• 彭博JYN Redux

三分钟掌握redux的compose方法

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

• max冰狼 JavaScript Redux

感谢 compose 函数，让我的代码屎山💩逐渐美丽了起来~

曾经有一段优美的代码放在我面前，我没有珍惜。直到现在每天面对代码屎山手足无措时，才追悔莫及！尘世间最大的痛苦莫过于此，如果上天给我再来一次的机会，我一定对这段代码说三个字 —— 六，六，六！！！

• 掘金安东尼 JavaScript

一文读懂Redux、React-Redux源码

前前言 朋友们好啊，我是来自推啊前端团队的 jarvis 同学，本次分享的内容是「解读Redux、React-Redux源码」。如果大家有不同的观点，欢迎在评论区吐槽和指正哦～😝😝😝 写在前面 作为

• 推啊前端团队 React.js Redux

Jetpack Compose 测量流程源码分析

解答心中所惑，如通过 Modifier 设置大小是如果起作用的？MeasurePolicy 接口的 measure 方法是怎么调用的？布局中的测量流程是什么样的？控件是怎么确认大小的？

• knight康康 Android Jetpack Android