什么是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为了什么。

因此，模式中的“精心设计” component看起来像这样：

class FancyAlerter extends Component {
    sendAlert = () => {
        this.props.sendTheAlert()
    }

    render() {
        <div>
          <h1>Today's Fancy Alert is {this.props.fancyInfo}</h1>
          <Button onClick={sendAlert}/>
        </div>
     }}

看看这个组件如何从props（它来自redux商店mapStateToProps）获取它显示的信息，它还从它的props获取其动作函数：sendTheAlert()。

那是mapDispatchToProps进来的地方：相应的container

// FancyButtonContainer.jsfunction mapDispatchToProps(dispatch) {
    return({
        sendTheAlert: () => {dispatch(ALERT_ACTION)}
    })}function mapStateToProps(state) {
    return({fancyInfo: "Fancy this:" + state.currentFunnyString})}export const FancyButtonContainer = connect(
    mapStateToProps, mapDispatchToProps)(
    FancyAlerter)

我不知道你可以看到，现在它的container 1，它知道Redux的调度和存储以及州和......东西。

该component图案中，FancyAlerter，这并呈现并不需要了解任何东西：它得到它的方法在调用onClick按钮，通过它的道具。

并且...... mapDispatchToProps是redux提供的有用手段，让容器可以轻松地将该函数传递到其props上的包装组件中。

所有这些看起来都非常像文档中的todo示例，这里有另一个答案，但我试图根据模式来强制推理它。

（注意：您不能使用mapStateToProps与mapDispatchToProps您无法访问dispatch内部的基本原因相同的目的mapStateToProp。因此您不能使用mapStateToProps为包装组件提供使用的方法dispatch。

我不知道为什么他们选择将它分解为两个映射函数 - 让mapToProps(state, dispatch, props) IE一个函数同时执行它们可能更整洁！

---

1 请注意，我故意明确命名容器FancyButtonContainer，以突出它是一个“东西” - 容器的身份（因此存在！）作为“一件事”有时会在速记中丢失

export default connect(...) ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

大多数示例中显示的语法

Answer 2

现在假设有一个针对redux的动作：

export function addTodo(text) {
  return {
    type: ADD_TODO,
    text  }}

当你导入它时，

import {addTodo} from './actions';class Greeting extends React.Component {

    handleOnClick = () => {
        this.props.onTodoClick(); // This prop acts as key to callback prop for mapDispatchToProps
    }

    render() {
        return <button onClick={this.handleOnClick}>Hello Redux</button>;
    }}const mapDispatchToProps = dispatch => {
    return {
      onTodoClick: () => { // handles onTodoClick prop's call here
        dispatch(addTodo())
      }
    }}export default connect(
    null,
    mapDispatchToProps)(Greeting);

正如函数名称所示mapDispatchToProps()，将dispatch动作映射到props（我们组件的道具）

因此，道具onTodoClick是一种mapDispatchToProps功能的关键，它可以进一步委派派遣行动addTodo。

此外，如果您想修改代码并绕过手动实现，那么您可以这样做，

import {addTodo} from './actions';class Greeting extends React.Component {

    handleOnClick = () => {
        this.props.addTodo();
    }

    render() {
        return <button onClick={this.handleOnClick}>Hello Redux</button>;
    }}export default connect(
    null,
    {addTodo})(Greeting);

这究竟意味着什么

const mapDispatchToProps = dispatch => {
    return {
      addTodo: () => { 
        dispatch(addTodo())
      }
    }}