Reactjs 什么是mapDispatchToProps？

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

除了读取状态外，容器组件还可以分派操作。以类似的方式，您可以定义一个名为

mapDispatchToProps（）

的函数，该函数接收

dispatch（）

方法，并返回要注入到presentational组件中的回调道具

这实际上毫无意义。既然已经有了

MapStateTrops

，为什么还需要

mapDispatchToProps

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

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

---

有人能用外行的语言解释一下这个函数是什么，为什么它有用吗？

它基本上是一个速记。因此，与其写：

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

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

this.props.onTodoClick(id);

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

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

---

---

Dan Abramov在此提供了一个有用的视频：

MapStateTrops

接收

状态和
道具
，并允许您从状态提取道具传递到组件

mapDispatchToProps
接收
调度
和
道具
，用于将动作创建者绑定到调度，以便在执行结果函数时调度动作

我发现这只会使您不必在组件中执行
分派（actionCreator（））
，从而使其更易于阅读

MapStateTrops
，
mapDispatchToProps
和
react-redux
库中的
connect
提供了一种方便的方式来访问您商店的
状态
和
dispatch
功能。所以基本上连接是一个高阶组件，如果这对您有意义，您也可以将其视为包装器。因此，每次更改
状态
时，将使用新的
状态
调用
MapStateTrops
，随后，当您
props
更新组件时，组件将运行渲染功能在浏览器中渲染组件
mapDispatchToProps
还将键值存储在组件的
props
上，通常它们采用函数的形式。通过这种方式，您可以从组件
onClick
，
onChange
事件中触发
state
更改

从文档：

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) 

const-TodoListComponent=（{todos，onTodoClick}）=>(

{todo.map（todo=>
onTodoClick（todo.id）}
/>
)}

)
常量mapStateToProps=（状态）=>{
返回{
todos:getVisibleTodos（state.todos，state.visibilityFilter）
}
}
const mapDispatchToProps=（调度）=>{
返回{
onTodoClick：（id）=>{
调度（切换到（id））
}
}
}
函数切换到（索引）{
返回{type:TOGGLE_TODO，index}
}
const TodoList=connect(
MapStateTops，
mapDispatchToProps
)（托多利斯特）

另外，请确保您熟悉并且
我觉得没有一个答案明确说明
mapDispatchToProps
为什么有用

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

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

与“显示内容”（组件）分开的是：


你如何让这些东西展示出来
以及你如何处理事件

这就是
容器的用途

因此，模式中的“精心设计的”
组件
如下所示：

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

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

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

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

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

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

（注意：您不能使用
mapStateToProps
来实现与
mapDispatchToProps
相同的目的，基本原因是您无权访问
dispatch
内部
mapStateToProp
。因此，您不能使用
MapStateTops
为包装组件提供使用
dispatch
的方法

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


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

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

大多数示例中显示的语法
MapStateTrops（）
是一个实用程序，可帮助您的组件获取更新状态（由其他一些组件更新），

mapDispatchToProps（）
是一个实用程序，它将帮助您的组件触发一个操作事件（分派可能导致应用程序状态更改的操作）
现在假设有一个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);

也就是说

const mapDispatchToProps = dispatch => {
    return {
      addTodo: () => { 
        dispatch(addTodo())
      }
    }
}

谢谢，但是
dispatch
方法的价值是什么？它来自哪里？哦，dispatch基本上会启动操作
const mapDispatchToProps = dispatch => {
    return {
      addTodo: () => { 
        dispatch(addTodo())
      }
    }
}