什么是mapDispatchToProps？

Question

什么是mapDispatchToProps？

我正在阅读Redux库的文档，它有这个例子：

除了读取状态之外，容器组件还可以调度操作。以类似的方式，您可以定义一个调用的函数mapDispatchToProps()，该函数接收该dispatch()方法并返回您想要注入演示组件的回调道具。

这实际上没有任何意义。mapDispatchToProps你已经拥有了为什么需要mapStateToProps？

他们还提供了这个方便的代码示例：

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }}

有人可以用非专业人的术语解释这个功能是什么以及为什么它有用？

Answer 1

我觉得没有一个答案已经明确为什么mapDispatchToProps有用。这实际上只能在container-component模式的上下文中得到解答，我在第一次阅读时发现了最好的理解：容器组件然后使用React。简而言之，你components应该只关心展示东西。他们应该从中获取信息的唯一地方是他们的道具。与“显示内容”（组件）分开是：你如何得到的东西，以及你如何处理事件。这是containers为了什么。因此，模式中的“精心设计”&nbsp;component看起来像这样：class&nbsp;FancyAlerter&nbsp;extends&nbsp;Component&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;sendAlert&nbsp;=&nbsp;()&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.props.sendTheAlert() &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<h1>Today's&nbsp;Fancy&nbsp;Alert&nbsp;is&nbsp;{this.props.fancyInfo}</h1> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Button&nbsp;onClick={sendAlert}/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}}看看这个组件如何从props（它来自redux商店mapStateToProps）获取它显示的信息，它还从它的props获取其动作函数：sendTheAlert()。那是mapDispatchToProps进来的地方：相应的container//&nbsp;FancyButtonContainer.jsfunction&nbsp;mapDispatchToProps(dispatch)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sendTheAlert:&nbsp;()&nbsp;=>&nbsp;{dispatch(ALERT_ACTION)} &nbsp;&nbsp;&nbsp;&nbsp;})}function&nbsp;mapStateToProps(state)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return({fancyInfo:&nbsp;"Fancy&nbsp;this:"&nbsp;+&nbsp;state.currentFunnyString})}export&nbsp;const&nbsp;FancyButtonContainer&nbsp;=&nbsp;connect( &nbsp;&nbsp;&nbsp;&nbsp;mapStateToProps,&nbsp;mapDispatchToProps)( &nbsp;&nbsp;&nbsp;&nbsp;FancyAlerter)我不知道你可以看到，现在它的container&nbsp;1，它知道Redux的调度和存储以及州和......东西。该component图案中，FancyAlerter，这并呈现并不需要了解任何东西：它得到它的方法在调用onClick按钮，通过它的道具。并且......&nbsp;mapDispatchToProps是redux提供的有用手段，让容器可以轻松地将该函数传递到其props上的包装组件中。所有这些看起来都非常像文档中的todo示例，这里有另一个答案，但我试图根据模式来强制推理它。（注意：您不能使用mapStateToProps与mapDispatchToProps您无法访问dispatch内部的基本原因相同的目的mapStateToProp。因此您不能使用mapStateToProps为包装组件提供使用的方法dispatch。我不知道为什么他们选择将它分解为两个映射函数 - 让mapToProps(state, dispatch, props)&nbsp;IE一个函数同时执行它们可能更整洁！1&nbsp;请注意，我故意明确命名容器FancyButtonContainer，以突出它是一个“东西” - 容器的身份（因此存在！）作为“一件事”有时会在速记中丢失export default connect(...)&nbsp;⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀大多数示例中显示的语法

Answer 2

现在假设有一个针对redux的动作：export&nbsp;function&nbsp;addTodo(text)&nbsp;{ &nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;ADD_TODO, &nbsp;&nbsp;&nbsp;&nbsp;text&nbsp;&nbsp;}}当你导入它时，import&nbsp;{addTodo}&nbsp;from&nbsp;'./actions';class&nbsp;Greeting&nbsp;extends&nbsp;React.Component&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;handleOnClick&nbsp;=&nbsp;()&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.props.onTodoClick();&nbsp;//&nbsp;This&nbsp;prop&nbsp;acts&nbsp;as&nbsp;key&nbsp;to&nbsp;callback&nbsp;prop&nbsp;for&nbsp;mapDispatchToProps &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<button&nbsp;onClick={this.handleOnClick}>Hello&nbsp;Redux</button>; &nbsp;&nbsp;&nbsp;&nbsp;}}const&nbsp;mapDispatchToProps&nbsp;=&nbsp;dispatch&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onTodoClick:&nbsp;()&nbsp;=>&nbsp;{&nbsp;//&nbsp;handles&nbsp;onTodoClick&nbsp;prop's&nbsp;call&nbsp;here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dispatch(addTodo()) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}}export&nbsp;default&nbsp;connect( &nbsp;&nbsp;&nbsp;&nbsp;null, &nbsp;&nbsp;&nbsp;&nbsp;mapDispatchToProps)(Greeting);正如函数名称所示mapDispatchToProps()，将dispatch动作映射到props（我们组件的道具）因此，道具onTodoClick是一种mapDispatchToProps功能的关键，它可以进一步委派派遣行动addTodo。此外，如果您想修改代码并绕过手动实现，那么您可以这样做，import&nbsp;{addTodo}&nbsp;from&nbsp;'./actions';class&nbsp;Greeting&nbsp;extends&nbsp;React.Component&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;handleOnClick&nbsp;=&nbsp;()&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.props.addTodo(); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<button&nbsp;onClick={this.handleOnClick}>Hello&nbsp;Redux</button>; &nbsp;&nbsp;&nbsp;&nbsp;}}export&nbsp;default&nbsp;connect( &nbsp;&nbsp;&nbsp;&nbsp;null, &nbsp;&nbsp;&nbsp;&nbsp;{addTodo})(Greeting);这究竟意味着什么const&nbsp;mapDispatchToProps&nbsp;=&nbsp;dispatch&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addTodo:&nbsp;()&nbsp;=>&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dispatch(addTodo()) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}}