什么是mapDispatchToProps？

我正在阅读Redux库的文档，其中包含以下示例：

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

这实际上是没有意义的。为什么现在mapDispatchToProps已经有需要mapStateToProps？

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

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

有人可以用外行的术语解释一下这个功能是什么以及为什么有用吗？

我觉得没有一个答案明确了为什么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：获取其action函数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的调度和存储以及州和......东西。

component模式中的in进行FancyAlerter渲染不需要了解任何东西：它onClick通过其props 获取其在按钮处调用的方法。

还有... mapDispatchToProps是redux提供的有用手段，它可以使容器轻松地将该函数传递给其props上的包装组件。

所有这些看起来都非常像docs中的todo示例，还有另一个答案，但是我试图根据模式来强调它为什么。

（请注意：您不能mapStateToProps出于mapDispatchToProps无法访问dispatch内部的基本原因而将其用于同一目的mapStateToProp。因此，您不能使用mapStateToProps来为包装的组件提供使用的方法dispatch。

我不知道他们为什么选择将其分为两个映射功能-IE可以mapToProps(state, dispatch, props) 同时使用这两个功能可能更简单！

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

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

大多数示例中显示的语法

基本上是简写。因此，不必写：

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

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

this.props.onTodoClick(id);

或更可能是这种情况，您可以将其用作事件处理程序：

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

丹·阿布拉莫夫（Dan Abramov）在此提供了一个有用的视频：https : //egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist

mapStateToProps()是一个实用程序，可以帮助您的组件获取更新的状态（由其他一些组件更新），
mapDispatchToProps()是一个实用程序，可以帮助您的组件触发一个动作事件（调度动作可能会导致应用程序状态更改）

mapStateToProps，mapDispatchToProps并且connect来自react-redux库提供了一种方便的方式来访问您的商店state和dispatch商店功能。因此，基本上connect是一个更高阶的组件，如果您认为合适的话，也可以将其视为包装器。因此，每次state更改mapStateToProps时，新组件都会调用它state，随后在props更新组件时，它将运行render函数以在浏览器中渲染组件。mapDispatchToProps还将键值存储在props组件的上，通常它们采用函数形式。通过这种方式，您可以触发state来自组件onClick，onChange事件的更改。

从文档：

const TodoListComponent = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>
)

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

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

function toggleTodo(index) {
  return { type: TOGGLE_TODO, index }
}

const TodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList) 

还要确保您熟悉React无状态函数和高阶组件

mapStateToProps接收state和，props并允许您从状态中提取道具以传递给组件。

mapDispatchToProps接收dispatch并props，用于绑定操作创建者以进行分派，因此当您执行结果函数时，将分派操作。

我发现这仅使您不必dispatch(actionCreator())在组件中执行操作，从而使其更易于阅读。

https://github.com/reactjs/react-redux/blob/master/docs/api.md#arguments

现在假设有一个针对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（我们组件的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())
      }
    }
}