Redux connect函数解释

Question

我是 redux 框架的新手。下面代码中的App是什么意思。是通过Type、Class来连接函数吗？我想知道它是如何工作的。显然 connect 函数返回一个新的导出模块。有人可以指出基本的 javascript 示例来理解这段代码吗？

export default connect(mapDispatchToProps)(App);

Answer 1

该函数是柯里化函数connect()的一个示例。有关 JavaScript 示例，请参阅此。它本质上是一个返回高阶分量的高阶函数。

connect()函数调用中可能令人困惑的两部分：

1. 第一个括号 - 这些是 connect 函数采用的参数 - mapDispatchToProps 是四个可选参数中的第二个参数

2. 第二组括号之间是您要通过 connect 方法连接到 Redux 存储的展示组件 (App)。

Connect 是用您传入的参数调用的。本质上有两个步骤，因为它是柯里化函数并且必须调用两次。

第一个函数调用采用您传入的参数并返回一个高阶组件（接受一个组件并返回另一个组件的函数）：

const enhance = connect(mapDispatchToProps); // 1st call - returns HOC

接下来，您的App（演示性）组件将传递给第一次调用返回的高阶组件，现在存储在enhance

enhance(App); // 2nd call - returns container component

我们正在“包装”App 组件，为其提供存储所需的所有数据，以及可用于向存储分派操作的函数。

因此，第二次调用返回一个新的“已连接”/容器 App 组件，该组件连接到 Redux 存储，并将所有 props/action 注入其中。这就是您的代码片段中导出的内容。您可以在这里阅读更多内容：HOC - React Docs

希望能解决这个问题！

Answer 2

react-redux函数本身connect返回另一个函数，而不是普通值。因此，您在这里看到的语法只是函数调用，其结果connect(mapDispatchToProps)是一个函数，然后使用参数调用该函数App。下面是一个返回函数的简单函数示例，您可以在 js 控制台中尝试。

function makeAdder(x) {
  function adder(y) {
    return x + y;
  }
  // return the inner `adder` function from the `makeAdder` function
  return adder;
}

console.log(makeAdder(5)(4)); // prints 9