React.js - 用简单的英语来说什么是 mapDispatchToProps？

Question

我已经学习 React/Redux 几天了。用通俗易懂的英语来说，什么是 mapDispatchToProps？

我有这个功能我不明白。

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

Answer 1

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

Answer 2

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

store.dispatch(selectBook(argument))

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

所以代码：

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

将导致

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

Answer 3

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

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

Answer 4

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

它与 connect 函数一起使用，这样 action return 由 action-creator 被分派到 redux 存储中，应用程序的所有状态都驻留在其中。

当单个 action-creators[=30= 中存在多个 action 时，
mapDispatchToProps 会派上用场].

您可以在 mapDispatchToProps 函数中的 dispatch 参数。

Answer 5

mapStateToProps returns 除了您的应用 state 存储在全局存储中并作为 props.[=23 传递给您的组件外，什么都没有=]

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

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

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

P.S 如果你刚开始使用 redux this course 强烈推荐。

React.js - 用简单的英语来说什么是 mapDispatchToProps？

React.js - In plain english what is mapDispatchToProps?

javascript

containers

dispatch

reactjs

redux