Redux 连接函数说明

Question

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

export default connect(mapDispatchToProps)(App);

Answer 1

redux 是一种存储数据的临时存储，connected 方法用于连接 redux 存储以访问来自任何组件的数据。

Answer 2

connect() 函数是 curried 函数 的一个示例。有关 JavaScript 示例，请参阅 this。它本质上是一个返回高阶组件的高阶函数。

connect() 函数调用中可能会混淆的两部分：

1. 第一个括号 - 这些是 connect 函数采用的参数 - mapDispatchToProps 是 four optional ones 中的第二个参数

2. 第二组括号之间是您正在寻求通过 connect 方法连接到 Redux 存储的演示组件（应用程序）。

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

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

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

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

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

我们正在“包装” App 组件，为它提供它需要从商店获取的所有数据，以及它可以用来向商店发送操作的函数。

因此，第二次调用返回一个新的“已连接”/container App 组件，该组件连接到 Redux 存储区，其中注入了所有道具/动作。这就是在您的 sn-p 中导出的内容。你可以在这里阅读更多：HOC - React Docs

希望能解决这个问题！

Answer 3

在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

Answer 4

App(you can use any name)是javascript module，它通过connect函数连接到Redux store，使用connect函数需要导入react-redux。connect(mapDispatchToProps)(App)语法是Higher order component的一个例子。 Redux-connect

Answer 5

1. App 是当前组件名称，如果您的组件名称是 Mycomp，那么如果它是类组件，您可以与 Mycomp 绑定。如果它是一个功能组件，这可能是您的组件分配给的 const 名称。
2. 如果指定了 mapStateToProps 函数，新的包装器组件将订阅 Redux 存储更新。这意味着无论何时更新 store，都会调用 mapStateToProps。 mapStateToProps 的结果必须是一个普通对象，它将被合并到被包装组件的 props 中。如果您不想订阅商店更新，请传递 null 或 undefined 来代替 mapStateToProps。
3. 通常称为 mapDispatchToProps，connect() 的第二个参数可能是对象、函数或未提供。默认情况下，您的组件将接收调度。
4. React 和 redux 是 2 个不同的库。 Connect 是在它们之间建立链接的纯函数。要深入了解 connect 的工作原理，请调试 react-redux 库的 connect 方法代码，希望能给您一些启发。