什么是mapDispatchToProps？

Question

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

除了读取状态，容器组件还可以调度操作。以类似的方式，您可以定义一个名为mapDispatchToProps（）的函数，该函数接收调度（）方法并返回要注入到表示组件中的回调道具。

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

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

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

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

Answer 1

mapStateToProps（）是一个实用程序，它帮助您的组件获得更新的状态（这是由一些其他组件更新），
mapDispatchToProps（）是一个实用程序，它将帮助您的组件触发操作事件（调度可能导致更改的操作的应用状态）

Answer 2

这基本上是一种速记。所以不用写：

this.props.dispatch(toggleTodo(id));

您可以使用示例代码中所示的mapDispatchToProps，然后在其他地方编写：

this.props.onTodoClick(id);

或者在这种情况下，更有可能的是，您将其作为事件处理程序：

<MyComponent onClick={this.props.onTodoClick} />

这里有一个由Dan Abramov制作的有用的视频：Redux：从React Redux（VisibleTodoList）生成具有连接（）的容器

Answer 3

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

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

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

与显示东西（组件）分开的是：

• 您如何获得要显示的内容，
• 以及你如何处理事件

这就是容器的用途。

因此，模式中的精心设计的组件看起来像这样：

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

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

查看此组件如何从道具（通过mapStateToProps来自redux存储）获取其显示的信息，以及如何从道具获取其操作函数：sendTheAlert（）。

这就是mapDispatchToProps的作用：在相应的容器中

// FancyButtonContainer.js

function mapDispatchToProps(dispatch) {
    return({
        sendTheAlert: () => {dispatch(ALERT_ACTION)}
    })
}

function mapStateToProps(state) {
    return({fancyInfo: "Fancy this:" + state.currentFunnyString})
}

export const FancyButtonContainer = connect(
    mapStateToProps, mapDispatchToProps)(
    FancyAlerter
)

我想知道你是否能看到，现在是容器1知道redux、dispatch、store、state和。。。东西

模式中的组件，FancyAlerter，进行渲染时不需要知道任何东西：它通过其道具在按钮的onClick处调用其方法。

而且mapDispatchToProps是redux提供的一种有用的方法，可以让容器轻松地将该函数传递到其道具上的包装组件中。

所有这些看起来都很像文档中的todo示例，这里还有另一个答案，但我试图根据模式来强调原因。

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

我不知道他们为什么选择将其分为两个映射函数-如果有mapToProps（state、dispatch、props）IE一个函数同时完成这两个功能，可能会更整洁！

1请注意，我故意显式地将容器命名为FancyButtonContainer，以突出它是一个“东西”——身份（因此存在！）容器作为“一个东西”有时会在速记中丢失

导出默认连接（...） ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

在大多数示例中显示的语法