JavaScript中f(x)(y)式双重传参解析——以Redux connect为例

嘿，这个问题问得太到位了！这种connect(mapDispatchToProps)(RemoveCounter)的写法其实是**函数柯里化（Currying）**的典型应用，咱们一步步拆解，就能轻松搞懂：

核心原理：函数柯里化 #

柯里化的本质是把一个多参数函数拆解成一系列单参数（或少量参数）的函数。每调用一次，只传入部分参数，返回一个新的函数；直到所有参数都传入后，才执行最终的核心逻辑。

对应到connect的具体流程 #

咱们把connect(mapDispatchToProps)(RemoveCounter)拆成两步看：

1. 第一步：调用connect(mapDispatchToProps)
   connect函数首先接收你的mapDispatchToProps（或者还有mapStateToProps等参数），然后返回一个专门用来包装React组件的高阶组件（HOC）函数。这一步并没有完成组件和Redux的连接，只是提前配置好了连接规则。

2. 第二步：调用返回的高阶组件函数，传入RemoveCounter
   刚才返回的高阶组件函数，会接收你的React组件RemoveCounter作为参数。它会在内部完成Redux和组件的绑定逻辑——比如把dispatch方法通过props传递给组件，或者把Redux state映射到组件props，最后返回一个被包装后的新组件，这个组件就是你最终export的、能和Redux交互的组件。

写个简化版模拟，帮你直观理解 #

不用纠结Redux的复杂细节，咱们写个极简版的connect模拟：

// 模拟简化版connect
function connect(mapDispatch) {
  // 第一次调用后返回一个新函数
  return function(WrappedComponent) {
    // 这里模拟绑定逻辑：生成组件需要的dispatch相关props
    return function(props) {
      const dispatchProps = {
        removeCounter: () => console.log("触发删除counter的dispatch")
      };
      // 返回包装后的组件，把dispatch props传进去
      return <WrappedComponent {...props} {...dispatchProps} />;
    };
  };
}

// 和你看到的调用方式完全一致
const ConnectedRemoveCounter = connect()(RemoveCounter);

为什么要这么设计？ #

这种写法最大的好处是复用性：如果多个组件需要用相同的mapDispatchToProps或mapStateToProps配置，你可以先调用connect(相同配置)得到一个通用的高阶组件，然后用它去包装不同的组件，不用每次都重复传入相同的配置参数。

内容的提问来源于stack exchange，提问作者Audrius Meškauskas