React.js - 简单的英语是什么mapDispatchToProps?

时间:2017-11-02 03:43:35

标签: javascript reactjs redux containers dispatch

我已经学习React / Redux几天了。简单和基本的英语,mapDispatchToProps是什么?

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

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

5 个答案:

答案 0 :(得分:4)

mapStateToProps 只返回存储在全局商店中的应用程序state,并以props的形式传递给您的组件。

mapDispatchToProps 将您的操作创建者包装在redux的dispatch方法中,然后将其作为prop再次传递到您的容器中。因此,基本上全球商店的state动作创建者包含调度都会作为道具传递给您的组件。您正在将和redux的调度方法作为组件的支柱。

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

此处连接的组件说ComponentA将收到道具,其中一个道具将dispatchAnActionmapDispatchToProps返回,如上面的代码所示。您将dispatchAnAction调用此this.props.dispatchAnAction()actionCreator1返回的操作将被调度到全局redux商店。

如果您正在开始减少,强烈建议使用 this course

答案 1 :(得分:2)

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

答案 2 :(得分:1)

如果没有mapDispatchToProps,您需要手动调用商店的调度。在这种情况下,您需要对商店对象的引用。

store.dispatch(selectBook(argument))

mapDispatchToProps设置(state,dispatch和action)的语法糖并将其作为组件的道具。

所以代码:

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

将导致

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

答案 3 :(得分:1)

调度动作可以定义为触发一个或多个减速器所期望的某种类型的动作。

因此,简单来说,mapDispatchToProps是将调度(动作创建者)作为道具映射到组件的方法。这样,您创建的动作创建者可以通过组件的道具访问。即this.props.{action_creator}

答案 4 :(得分:1)

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

它与连接功能一起使用,以便将 action-creator 返回的操作分派到redux商店,应用程序的所有状态所在的位置。

动作创建者中存在多个操作时,

mapDispatchToProps 会派上用场。

您可以借助 mapDispatchToProps中的调度参数,在单个 action-creator 中返回多个操作 功能。