什么是 mapDispatchToProps? [英] What is mapDispatchToProps?

问题描述

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

I was reading the documentation for the Redux library and it has this example:

除了读取状态，容器组件还可以分派动作.以类似的方式，您可以定义一个名为 mapDispatchToProps() 的函数，该函数接收 dispatch() 方法并返回您想要注入到展示组件中的回调道具.

In addition to reading the state, container components can dispatch actions. In a similar fashion, you can define a function called mapDispatchToProps() that receives the dispatch() method and returns callback props that you want to inject into the presentational component.

这其实毫无意义.当您已经拥有 mapStateToProps 时，为什么还需要 mapDispatchToProps?

This actually makes no sense. Why do you need mapDispatchToProps when you already have mapStateToProps?

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

They also provide this handy code sample:

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

有人可以通俗的解释一下这个函数是什么以及它为什么有用吗?

Can someone please explain in layman's terms what this function is and why it is useful?

推荐答案

我觉得没有一个答案能明确说明 mapDispatchToProps 为何有用.

I feel like none of the answers have crystallized why mapDispatchToProps is useful.

这实际上只能在 container-component 模式的上下文中回答，我发现第一次阅读时最容易理解:容器组件 然后 与 React 一起使用.

This can really only be answered in the context of the container-component pattern, which I found best understood by first reading:Container Components then Usage with React.

简而言之，您的 components 应该只关心显示内容.他们应该从中获取信息的唯一地方是他们的道具.

In a nutshell, your components are supposed to be concerned only with displaying stuff. The only place they are supposed to get information from is their props.

与显示内容"(组件)分开的是:

Separated from "displaying stuff" (components) is:

• 如何显示内容，
• 以及您如何处理事件.

这就是容器的用途.

因此，模式中设计良好"的组件如下所示:

Therefore, a "well designed" component in the pattern look like this:

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 store，通过 mapStateToProps)并且它也从它的 props 获取它的 action 函数:sendTheAlert().

That's where mapDispatchToProps comes in: in the corresponding container

这就是 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 )

I wonder if you can see, now that it's the container 1 that knows about redux and dispatch and store and state and ... stuff.

我想知道你是否能看到，现在是 container 1 了解 redux、调度、存储和状态等等.

The component in the pattern, FancyAlerter, which does the rendering doesn't need to know about any of that stuff: it gets its method to call at onClick of the button, via its props.

模式中的 component，FancyAlerter，它进行渲染不需要知道任何这些东西:它获取在 onClick 按钮，通过它的道具.

And ... mapDispatchToProps was the useful means that redux provides to let the container easily pass that function into the wrapped component on its props.

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

All this looks very like the todo example in docs, and another answer here, but I have tried to cast it in the light of the pattern to emphasize why.

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

(Note: you can't use mapStateToProps for the same purpose as mapDispatchToProps for the basic reason that you don't have access to dispatch inside mapStateToProp. So you couldn't use mapStateToProps to give the wrapped component a method that uses dispatch.

(注意:您不能将 mapStateToProps 用于与 mapDispatchToProps 相同的目的，因为您无权访问 dispatchcode> 在 mapStateToProp 中.所以你不能使用 mapStateToProps 给被包装的组件一个使用 dispatch 的方法.

I don't know why they chose to break it into two mapping functions - it might have been tidier to have mapToProps(state, dispatch, props) IE one function to do both!

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

1 请注意，我特意明确命名了容器FancyButtonContainer，强调它是一个东西"——容器作为一个东西"的身份(因此存在！)有时会在速记中丢失

1 Note that I deliberately explicitly named the container FancyButtonContainer, to highlight that it is a "thing" - the identity (and hence existence!) of the container as "a thing" is sometimes lost in the shorthand

导出默认连接(...)⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

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

大多数示例中显示的语法

这篇关于什么是 mapDispatchToProps?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！