React.js - 简而言之，啥是 mapDispatchToProps？

Posted 2023-02-22

【中文标题】React.js - 简而言之，啥是 mapDispatchToProps？

【英文标题】：React.js - In plain english what is mapDispatchToProps?React.js - 简而言之，什么是 mapDispatchToProps？

【发布时间】：2018-04-14 12:02:17

【问题描述】：

我已经学习 React/Redux 几天了。简而言之，什么是 mapDispatchToProps？

我有这个我不明白的功能。

function mapDispatchToProps(dispatch) 
  return bindActionCreators( selectBook: selectBook, dispatch); 

【问题讨论】：

检查this answer

【参考方案1】：

ma​​pStateToProps 只返回存储在全局存储中并作为 props 传递给您的组件的应用程序的 state。

ma​​pDispatchToProps 将您的动作创建者包装在 redux 的 dispatch 方法中，并将其作为 prop 再次传递给您的容器。所以基本上全局商店的state 和用dispatch 包装的动作创建者 都作为道具一起传递给你的组件。您将 state 和 redux 的 dispatch 方法作为 props 传递给组件。

mapDispatchToProps = dispatch => (
    dispatchAnAction: dispatch(actionCreator1)
)

这里连接的组件说ComponentA 将接收道具，其中一个道具将是dispatchAnAction，它由mapDispatchToProps 返回，如上面的代码所示。您将像这样调用dispatchAnAction this.props.dispatchAnAction() 并且actionCreator1 返回的操作将被调度到全局redux 存储。

P.S 如果你从 redux 开始，强烈推荐 this course。

【参考方案2】：

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

【讨论】：

那么mapStateToProps和mapDispatchToProps有什么区别呢？因为在同一个容器中我有function mapStateToProps(state) return books: state.books ;

mapDispatchToProps 是一种将 action creator functions 映射到 props 的方法，这样您就可以调用 this.props.myAction() 而不是 this.props.store.dispatch(myAction())。 mapStateToProps 将值从商店状态映射到您的道具。

【参考方案3】：

如果没有 mapDispatchToProps，您将需要手动调用 store 上的 dispatch。在这种情况下，您需要一个引用来存储对象。

store.dispatch(selectBook(argument))

mapDispatchToProps 设置（state、dispatch 和 action）的语法糖，并将其作为组件的 props。

所以代码：

function mapDispatchToProps(dispatch) 
    return bindActionCreators( selectBook: selectBook, dispatch); 

会导致

props:  
    selectBook: (arguments) =>  dispatch(selectBook(arguments))  

【参考方案4】：

调度一个动作可以定义为触发你的一个或多个reducer期望的某种类型的动作。

简单来说，mapDispatchToProps 是一种方法，您可以通过该方法将您的调度（动作创建者）作为道具映射到您的组件。这样，您创建的动作创建者可以通过组件的 props 访问。即this.props.action_creator。

【参考方案5】：

ma​​pDispatchToProps 只是一个将动作创建者传递到您的组件中的接口，在同一个组件中，这些 actions-creators 可以作为 props 访问。

它与 connect 函数一起使用，这样 action-creator 返回的 action 被分派到 redux 存储中，应用程序的所有状态所在的位置。

当单个

action-creators

中存在多个

action

时，

ma​​pDispatchToProps 会派上用场。

借助 ma​​pDispatchToProps 中的 dispatch 参数，您可以在单个 action-creator 中返回多个 actions strong> 功能。