React - Redux connect()() 语法清晰

Posted 2023-02-21

【中文标题】React - Redux connect()() 语法清晰

【英文标题】：React - Redux connect()() syntax clarity

【发布时间】：2020-04-25 23:40:13

【问题描述】：

我刚开始学习 react-redux，对 redux 的 connect 函数中指定的语法感到困惑。

据我了解，我们定义和调用的普通函数如下：

//function definition
function fun_name(arg)
    //do some operations



// function calling
fun_name('my_argument');

在反应中发现了一些有趣的线

export default connect(mapStateToProps, mapDispatchToProps)('SomeComponentName');

但是这里上面的行调用了带有两个参数 mapStateToProps、mapDispatchToProps 的连接函数。 后者定义了 ('SomeComponentName')

有人知道“connect()()”是什么语法还是导出的一部分？

【参考方案1】：

在JS中称为currying。

Currying 是一种函数转换，将函数从 f(a, b, c) 的可调用函数转换为 f(a)(b)(c) 的可调用函数。

Currying 不会调用函数。它只是改变它。

来源https://javascript.info/currying-partials

例如

function outer()
  return inner


function inner()
 console.log("I got called")


outer()()

【参考方案2】：

基本上，connect 是一个返回另一个方法的方法。

所以，当您执行connect() 时，它会调用connect 方法并返回一个方法，当您执行connect()() 时，第二个() 会调用该方法。

【讨论】：

您有任何参考资料或链接可供我查看吗？

【参考方案3】：

connect() 函数返回另一个需要调用的函数，并且需要一个参数，即组件。

正如connect() Returns 文档所述：

connect() 的返回是一个包装器函数，它接收您的组件并返回一个包装器组件以及它注入的附加道具。在大多数情况下，包装函数会被立即调用，而不是保存在临时变量中：export default connect(mapState, mapDispatch)(Login)。

你可以想像下面这样的代码sn-p：

const connectedFunction = connect(mapStateToProps, mapDispatchToProps);
export default connectedFunction(SomeComponentName);

建议阅读connect() 概述：https://react-redux.js.org/api/connect#overview

希望对你有帮助！