Fatal编程技术网

Javascript connect方法redux参数

javascript reactjs ecmascript-6 redux

Javascript connect方法redux参数,javascript,reactjs,ecmascript-6,redux,Javascript,Reactjs,Ecmascript 6,Redux,在处理redux的connect方法时，下面的语法让我感到困惑 export default connect( mapStateToProps, mapDispatchToProps )(TodoItem) connect接受两个参数，MapStateTrops，mapDispatchToProps，这很有意义。与任何函数相同，即 function sum(a, b){ return a + b; } sum(2, 8); 然而，让我困惑的是下一个参数，在我上面提供的示例中（

在处理redux的
connect
方法时，下面的语法让我感到困惑

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoItem)

connect
接受两个参数，
MapStateTrops
，
mapDispatchToProps
，这很有意义。与任何函数相同，即

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

sum(2, 8);
然而，让我困惑的是下一个参数，在我上面提供的示例中
（TodoItem）
。有人能解释一下这里发生了什么吗？

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

它返回的新函数实际上是一个高阶组件。这意味着它是一个返回另一个组件的组件。在本例中，包装组件的是
提供程序
组件

在这一点上：


connect(mapStateToProps, mapDispatchToProps)


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


connect(mapStateToProps, mapDispatchToProps)(TodoItem)


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


connect(mapStateToProps, mapDispatchToProps)(TodoItem)


摘要

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

通常，这是一个返回函数的函数。

在connect中，用例是将组件作为参数传递给“第二个”内部函数，这样它就可以访问所有3个参数

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



var root=document.getElementById（'root'）；
root.addEventListener（'click'，clicked（'i Was clicked！！'）；
单击的函数（参数）{
返回函数（e）{
//这两个参数都是可接受的
控制台日志（param）；
log（e.target.innerHTML）；
}
}


单击我