redux 中的链式箭头函数是什么意思？

Question

看着real world example我看到这个设置api中间件：

export default store => next => action => {
  const callAPI = action[CALL_API]
  if (typeof callAPI === 'undefined') {
    return next(action)
  }

这里到底发生了什么？我看到 configureStore 正在导入任何内容并将其从 redux 传递给 applyMiddleware，但是这种语句在 js 中意味着什么？

我假设它正在导出一个返回函数的匿名函数？刚刚试过这个：

var a = b => c => d => {
    console.log('a:', a);
    console.log('b:', b);
    console.log('c:', c);
    console.log('d:', d);
};

a(5)(6)(7);

// outputs b: 5, c: 6, and d: 7

Answer 1

功能特化

箭头函数表示法简化了 JavaScript 中的 currying。

这只是partial applications 的一种方式，并允许在不同时间将参数绑定到函数，方法是使用Closures 而不是Function.prototype.bind。

当您在 Store 创建期间调用 applyMiddleware 时，Redux 将使用当前应用到的 Store 专门化您的中间件。

然后它变成了一个新的专用函数，只需要两个参数：

next => action

next 是在 Action 上调用的下一个中间件。 （就像在 Express 中一样，它普及了这个概念，用于请求处理）

时间线

这里重要的是所有这些功能特化都是在不同的时间完成的。

• store可以在创建Store时绑定。
• next 可以在知道绑定到的 Store 后绑定，在 Store creation 期间也是如此，但可以稍后更新。
• action 仅在您有效调度 Action 时才知道，这可能随时发生。

专用中间件（已绑定到 Store，并且已经知道 Next 中间件功能的中间件）将是可重用，并为每个新调度的 Action 调用。

函数式编程

这些概念（柯里化和部分应用）来自Functional Programming 世界。

Redux 严重依赖这种范式，而 Redux 中最重要的是 Side-Effects 的副业（尤其是突变）。

直接捕获函数的上下文，或通过 require 使用全局 Store 是一种副作用，因为您的函数将在其声明后直接绑定到此 Store。

相反，Redux 使用 Currying 来允许 Dependency Injection 的排序，它产生了一个无状态函数，可以重用并在运行时专门化。

这样您的中间件就是 Loosely Coupled 到 Store。

Answer 2

要清楚地理解这一点，您首先需要了解中间件在 redux 中是如何工作的。所以先通过this

现在即使在阅读文档之后你仍然感到困惑，不要担心它有点复杂，请尝试再次阅读它:)。在阅读 2-3 次后我正确理解了这一点。

现在您在问题中提到的是一种 ES6 语法。如果您尝试将其转换为 vanilla javascript，它会如下所示

function (store) {
  return function (next) {
    return function (action) {
      var callAPI = action[CALL_API];
      if (typeof callAPI === 'undefined') {
        return next(action);
      }
    };
  };
};

所以如果你看到它只是函数链。