我正在阅读 Redux 库的文档，它有这个例子：除了读取状态，容器组件还可以调度动作。以类似的方式，您可以定义一个名为 mapDispatchToProps() 的函数，该函数接收 dispatch() 方法并返回您想要注入到演示组件中的回调道具。这实际上没有任何意义。当您已经拥有 mapStateToProps 97b— 时，为什么还需要 mapDispatchToProps ？他们还提供了这个方便的代码示例： const mapDispatchToProps = (dispatch) => { return { onTodoClick: (id) => { dispatch(toggleTodo(id)) } } } 这是什么功能，为什么有用？原文由 Code Whisperer 发布，翻译遵循 CC BY-SA 4.0 许可协议

它基本上是一个速记。所以不必写： this.props.dispatch(toggleTodo(id)); 您将使用示例代码中所示的 mapDispatchToProps，然后在其他地方编写： this.props.onTodoClick(id); 或者在这种情况下更有可能，您将其作为事件处理程序： <MyComponent onClick={this.props.onTodoClick} /> 此处有 Dan Abramov 制作的有用视频： Redux：使用 React Redux (VisibleTodoList) 的 connect() 生成容器原文由 hamstu 发布，翻译遵循 CC BY-SA 4.0 许可协议

什么是 mapDispatchToProps？

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

这实际上只能在 container-component 模式的上下文中回答，我发现通过第一次阅读最好理解： Container Components then 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 商店），它还从它的 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 1 知道 redux 和 dispatch 以及 store 和 state 等等。

模式中的 component FancyAlerter ，渲染不需要知道任何这些东西：它的方法是调用 onClick 按钮，通过它的道具。

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

所有这些看起来都非常像文档中的 todo 示例，以及此处的另一个答案，但我试图根据模式对其进行投射以强调 为什么。

（注意：您不能使用 mapStateToProps 与 mapDispatchToProps --- 相同的目的，因为您无权访问 dispatch inside mapStateToProp . 所以你不能使用 mapStateToProps 给被包装的组件一个使用 dispatch 的方法。

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

1 请注意，我故意将容器明确命名为 FancyButtonContainer ，以强调它是“事物”——容器作为“事物”的身份（因此存在！）有时会在速记中丢失

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

大多数示例中显示的语法

原文由 GreenAsJade 发布，翻译遵循 CC BY-SA 4.0 许可协议

什么是 mapDispatchToProps？

你尚未登录，登录后可以

Stack Overflow 翻译