Redux 连接函数说明

Posted 2023-02-22

【中文标题】Redux 连接函数说明

【英文标题】：Redux connect function explanation

【发布时间】：2019-12-30 07:21:40

【问题描述】：

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

export default connect(mapDispatchToProps)(App);

【问题讨论】：

请参考sohamkamani.com/blog/2017/03/31/react-redux-connect-explained

这解释了连接 api。不回答我的问题。我的问题是关于这个 javascript 语法的解释。什么“应用程序”站在这里。是连接函数的参数还是其他意思？

App 是您的展示组件，它作为参数传递给 connect() 函数的第二次调用。请参阅下面的完整答案。

【参考方案1】：

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

【参考方案2】：

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

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

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

第二组括号之间是您正在寻求通过 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

希望能解决这个问题！

【讨论】：

“所以，第二次调用返回一个新的“已连接”/容器应用程序组件” - 不正确！您可以记录日志并查看调用 connect()() 的结果。而且它不是函数或类组件，它是特殊的对象。

【参考方案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

【讨论】：

谢谢@azundo。它回答了我的问题。

【参考方案4】：

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

【讨论】：

感谢您的回答。我的理解是这是一个javascript语法。你能解释一下这个语法吗？它是如何工作的？

请阅读我提到的每一个术语，都是详细的主题，这里不能解释。更多***.com/questions/39419237/what-is-mapdispatchtoprops

【参考方案5】：

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

【讨论】：

这没有回答问题。当然调试 redux 代码库是一种选择。