我正在阅读Redux库的文档,它有以下示例:
除了读取状态外,容器组件还可以分派操作。以类似的方式,您可以定义一个名为
mapDispatchToProps()
的函数,该函数接收dispatch()
方法,并返回要注入到presentational组件中的回调道具
这实际上毫无意义。既然已经有了MapStateTrops
,为什么还需要mapDispatchToProps
它们还提供了以下方便的代码示例:
const-mapsdispatchtoprops=(调度)=>;{
返回{
onTodoClick:(id)=>{
调度(切换到(id))
}
}
}
这个函数是什么?它为什么有用
我觉得所有答案都没有明确说明mapDispatchToProps
为什么有用
这实际上只能在容器组件
模式的上下文中得到回答,我发现通过第一次阅读可以最好地理解:容器组件,然后使用React
简而言之,组件
应该只与显示内容有关。他们唯一应该获得信息的地方是他们的道具
与“显示内容”(组件)分开的是:
- 你如何让这些东西展示出来
- 以及你如何处理事件
这就是容器的用途
因此,模式中的“精心设计的”组件
如下所示:
类FancyAlerter扩展组件{
sendAlert=()=>{
this.props.sendTheAlert()
}
render(){
<;div>;
<;h1>;今天的花式警报是{this.props.fancyInfo}<;/h1>;
<;按钮onClick={sendAlert}/>;
<;/div>;
}
}
查看此组件如何从道具(通过mapStateToProps
来自redux存储)获取其显示的信息,以及如何从道具获取其操作函数:sendTheAlert()
这就是mapDispatchToProps
的作用:在相应的容器中
//FancyButtonContainer.js
功能图DispatchToprops(调度){
返回({
发送警报:()=>;{发送(警报动作)}
})
}
函数MapStateTops(状态){
return({fancyInfo:“+state.currentFunnyString}想象一下这个)
}
导出常量FancyButtonContainer=connect(
mapStateToProps,mapDispatchToProps)(
爱好者
)
我想知道您是否可以看到,现在是容器
1知道redux、dispatch、store、state和。。。东西
模式中的组件
,FancyAlerter
,进行渲染时不需要知道任何东西:它通过其道具在按钮的onClick
处调用其方法
而且mapDispatchToProps
是redux提供的一种有用的方法,可以让容器轻松地将该函数传递到其道具上的包装组件中
所有这些看起来都很像文档中的todo示例,这里还有另一个答案,但我试图根据模式来强调为什么
(注意:您不能使用mapStateToProps
来实现与mapDispatchToProps
相同的目的,基本原因是您无权访问dispatch
内部mapStateToProp
。因此,您不能使用MapStateTops
为包装组件提供使用dispatch
的方法
我不知道他们为什么选择将其分为两个映射函数-如果有mapToProps(state、dispatch、props)
IE一个函数同时完成这两个功能,可能会更整洁
1请注意,我特意明确地将容器命名为FancyButtonContainer
,以强调它是一个“东西”——容器作为“一个东西”的身份(因此存在!)有时会在速记中丢失
导出默认连接(…)
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
大多数示例中显示的语法