什么是mapDispatchToProps?

我正在阅读Redux库的文档,它有以下示例:

除了读取状态外,容器组件还可以分派操作。以类似的方式,您可以定义一个名为mapDispatchToProps()的函数,该函数接收dispatch()方法,并返回要注入到presentational组件中的回调道具

这实际上毫无意义。既然已经有了MapStateTrops,为什么还需要mapDispatchToProps

它们还提供了以下方便的代码示例:

const-mapsdispatchtoprops=(调度)=>{
返回{
onTodoClick:(id)=&gt{
调度(切换到(id))
}
}
}

这个函数是什么?它为什么有用

我觉得所有答案都没有明确说明mapDispatchToProps为什么有用

这实际上只能在容器组件模式的上下文中得到回答,我发现通过第一次阅读可以最好地理解:容器组件,然后使用React

简而言之,组件应该只与显示内容有关。他们唯一应该获得信息的地方是他们的道具

与“显示内容”(组件)分开的是:

  • 你如何让这些东西展示出来
  • 以及你如何处理事件

这就是容器的用途

因此,模式中的“精心设计的”组件如下所示:

类FancyAlerter扩展组件{
sendAlert=()=&gt{
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,以强调它是一个“东西”——容器作为“一个东西”的身份(因此存在!)有时会在速记中丢失

导出默认连接(…)
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

大多数示例中显示的语法

发表评论