使用 mapDispatchToProps 反应 Redux Thunk答案

【问题标题】：React Redux Thunk with mapDispatchToProps使用 mapDispatchToProps 反应 Redux Thunk
【发布时间】：2018-01-18 08:10:15
【问题描述】：

查看如何使用mapDispatchToProps 的示例，大多数示例遵循以下模式，该函数返回带有dispatch 作为参数的对象：

const mapDispatchToProps = (dispatch) => {
    return({
        someFunc: (arg) => {dispatch(someFunc(arg))}
    })
}

我的问题是，如果我的所有操作都使用thunk，这意味着他们都可以访问dispatch，为什么我需要使用上面的示例将函数映射到我的containers 中的道具？

经过试验，我找到了另一种似乎可行的方法，但我不确定这是否是最佳做法......

Main.jsx

import * as mainActions from '../actions/mainActions'
import * as menuActions from '../actions/menuActions'

const actionsToMap = {...mainActions, ...menuActions}
export default connect(mapStateToProps, actionsToMap)(Main)

这种方法有什么问题吗？

【问题讨论】：

我猜你会从这个*.com/questions/41670146/…得到你的答案。实际上连接的第二个参数是一个函数或一个对象

标签： reactjs redux redux-thunk

【解决方案1】：

这两种方法都是正确的，当您想将一些操作创建者传递给不了解 Redux 的组件，并且您不想将调度或 Redux 存储传递给它时，您也可以使用 bindActionCreators .从技术上讲，这是它的唯一用例。

从documentation中拉出来，mapDispatchToProps可以是函数也可以是对象。

我认为您的第一种方法对文档很有用，因为您可以轻松查看您在组件中使用的动作创建者的签名，而无需导航到动作创建者文件。除此之外，在大多数情况下，我可以使用对象（您的第二种方法）。

希望这会有所帮助！

【讨论】：

【解决方案2】：

分离关注点是一个好主意，并且在几乎所有应用程序中，使用 Action Creators（这是您在第二个示例中所做的）而不是使用普通对象（如第一个示例）是一个好主意.

有几个好处：

如果不埋在对象/函数中，则更易于扩展和转换
更容易测试独立的功能性操作。（您是否尝试过测试第一个示例？）
可以重复使用 - 如果您的应用的其他部分需要调度相同的操作会发生什么情况，您会剪切并粘贴此调度吗？
现在将 1 和 3 一起考虑，如果您在多个地方分派了它并且需要扩展？

这不仅仅是我说的，Redux 文档在这里介绍了它：https://redux.js.org/recipes/reducingboilerplate#action-creators

话虽如此，他们也确实说普通对象可能就足够了，但考虑到动作创建者实际上是多么简单，让您的工作在几乎所有情况下都可扩展可能是值得的。

【讨论】：