什么是mapDispatchToProps？

Question

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

除了读取状态之外，容器组件还可以分派操作。以类似的方式，您可以定义一个名为mapDispatchToProps()的函数，该函数接收dispatch()方法并返回您希望注入到表示组件中的回调属性。

这实际上是没有意义的。既然已经有了mapStateToProps，为什么还要用mapDispatchToProps呢？

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

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

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

Answer 1

我觉得没有一个答案明确了为什么mapDispatchToProps是有用的。

这实际上只能在container-component模式的上下文中得到回答，我发现先读Container Components再读Usage with 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 (通过mapStateToProps从redux store获取)显示的信息的，它也是从它的props：sendTheAlert()获取动作函数的。

这就是mapDispatchToProps的用武之地:在相应的container中

// 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
)

我想知道你是否能看到，现在是container 知道redux、分派、存储和状态以及...一些东西。

模式中的component，FancyAlerter，它进行渲染，不需要知道任何东西:它通过它的道具让它的方法在按钮的onClick调用。

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

所有这些看起来都非常像文档中的todo示例，以及这里的另一个答案，但我试图根据模式来转换它，以强调为什么。

(注意:您不能将mapStateToProps用于与mapDispatchToProps相同的目的，因为基本原因是您无法访问mapStateToProp中的dispatch。因此，您不能使用mapStateToProps为包装的组件提供使用dispatch的方法。

我不知道为什么他们选择把它分成两个映射函数--让mapToProps(state, dispatch, props) IE用一个函数来做这两件事可能会更整洁！

请注意，我特意显式地将容器命名为FancyButtonContainer__，以强调它是一个“事物”--身份(因此是存在的！)容器的“一个东西”有时会在速记中迷失。

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

大多数示例中显示的语法

Answer 2

这基本上是一种速记。因此，不必编写：

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

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

this.props.onTodoClick(id);

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

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

这里有一个由丹·阿布拉莫夫拍摄的有用的视频：Redux: Generating Containers with connect() from React Redux (VisibleTodoList)

Answer 3

mapStateToProps()是一个实用程序，它可以帮助你的组件获得更新的状态(由其他一些组件更新)，

mapDispatchToProps()是一个实用程序，它将帮助您的组件触发操作事件(调度可能导致应用程序状态更改的操作)