javascript - Redux connect 函数解释

Question

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

export default connect(mapDispatchToProps)(App);

Answer 1

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

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

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

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

Connect 使用您传入的参数进行调用。由于它是柯里化(Currying)函数并且必须调用两次，所以基本上有两个步骤。

第一个函数调用接受您传入的参数并返回一个高阶组件(一个接受一个组件并返回另一个组件的函数):

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

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

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

我们正在“包装”App 组件，为其提供商店所需的所有数据，以及可用于将操作分派(dispatch)到商店的功能。

因此，第二次调用返回一个新的“已连接”/容器 App 组件，该组件已连接到 Redux 存储，并注入(inject)了所有 Prop /操作。这就是您的代码段中导出的内容。您可以在此处阅读更多信息:HOC - React Docs

希望一切都解决了!