连接方法 redux 参数答案

【问题标题】：connect method redux arguments连接方法 redux 参数
【发布时间】：2017-09-14 07:43:10
【问题描述】：

处理 redux 的 connect 方法时的以下语法让我感到困惑。

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoItem)

connect 有两个参数，mapStateToProps，mapDispatchToProps，这是有道理的。与任何功能相同，即

function sum(a, b){
   return a + b;
}

sum(2, 8);

但是，让我感到困惑的是下一个参数，在我上面提供的示例(TodoItem) 中。谁能解释这里发生了什么？

【问题讨论】：

标签： javascript reactjs ecmascript-6 redux

【解决方案1】：

您需要从 JSX 中导出一个组件。 connect 函数是一个高阶函数，意味着它返回一个新函数。

它返回的新函数实际上是一个高阶组件。这意味着它是一个返回另一个组件的组件。在这种情况下，包裹您的组件的是 Provider 组件。

此时：

connect(mapStateToProps, mapDispatchToProps)

您实际上并没有告诉connect 函数要包装哪个组件。

connect(mapStateToProps, mapDispatchToProps)(TodoItem)

但在这里你也告诉它要包装哪个组件。

总结

所以你作为参数传入的前两个函数告诉它组件需要什么。最后一个函数参数告诉它哪个组件需要它们。

【讨论】：

【解决方案2】：

这是函数currying。
一般来说，这是一个返回函数的函数。
在连接中，用例是将组件作为参数传递给“第二个”内部函数，这样它将可以访问所有 3 个参数。

一个简单的用例是当您想将额外参数传递给onClick 事件时。

var root = document.getElementById('root');
root.addEventListener('click', clicked('i Was clicked!!'));

function clicked(param){
  return function(e){
    // both parameters acceesible
    console.log(param);
    console.log(e.target.innerHTML);    
  }
}

&lt;button id="root"&gt;Click me&lt;/button&gt;

所以它在幕后这样调用：

clicked('i was clicked!!')(event)

【讨论】：