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将参数绑定到函数。

当您在商店创建过程中调用applyMiddleware时，Redux会将您的中间件与其应用的当前商店进行专门化。

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

next => action

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

时间轴

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

store可以在商店创建期间绑定。
next一旦知道它所绑定的商店就可以绑定，所以也可以在Store creation期间绑定，但可以在以后更新。
action只有在您有效地分派动作时才会知道，这可能随时发生。

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

功能编程

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

Redux在很大程度上依赖于这种范式，而Redux中最重要的是 Side-Effects （尤其是突变）的边线。

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

相反，Redux使用Currying来允许排序 Dependency Injection ，它会产生无状态函数，可以重复使用，专门用于运行时。

通过这种方式，您的中间件可以 Loosely Coupled 到商店。

Answer 2

要清楚地理解这一点，您首先需要了解中间件在redux中的工作原理。首先，请浏览this

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

现在你在问题中提到的那个是一个curry ES6语法。如果您尝试将此转换为vanilla javascript，则会出现类似下面的内容

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

所以如果你看到它只是链接功能。

链接箭头函数在redux中意味着什么？

2 个答案:

功能专业化

时间轴

功能编程