连接方法redux参数

Question

在处理redux的connect方法时，以下语法令人困惑。

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoItem)

connect需要两个参数mapStateToProps和mapDispatchToProps ，这很有意义。 与任何功能相同，即

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

sum(2, 8);

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

Answer 1

您需要从JSX导出组件。 connect函数是一个高阶函数 ，表示它返回一个新函数。

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

这一点：

connect(mapStateToProps, mapDispatchToProps)

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

connect(mapStateToProps, mapDispatchToProps)(TodoItem)

但是在这里，您还告诉它要包装哪个组件。

摘要

因此，您作为参数传入的前两个函数告诉它组件需要什么。 最后一个函数参数告诉它需要哪个组件。

Answer 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); } } 

 <button id="root">Click me</button> 

因此，在幕后它像这样调用：

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