使用 mapDispatchToProps 反应 Redux Thunk

Question

查看如何使用 mapDispatchToProps 的示例，大多数示例都遵循以下模式，一个 returns 一个以 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)

这种做法有什么问题吗？

Answer 1

这两种方法都是正确的，当你想将一些 action creator 传递给不支持 Redux 的组件，并且你不想传递 dispatch 或Redux 存储它。从技术上讲，这是它的唯一用例。

从 documentation 中提取它，mapDispatchToProps 可以是函数或对象。

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

希望对您有所帮助！

Answer 2

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

有几个好处：

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

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

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

使用 mapDispatchToProps 反应 Redux Thunk

React Redux Thunk with mapDispatchToProps

reactjs

redux

redux-thunk