使用 ConnectedProps 和 redux-thunk 获取正确的调度类型答案

【问题标题】：Get correct dispatch type using ConnectedProps with redux-thunk使用 ConnectedProps 和 redux-thunk 获取正确的调度类型
【发布时间】：2020-07-11 10:33:09
【问题描述】：

根据标题，我使用的是 Redux-Toolkit 和 Typescript。特别是，我正在尝试按照redux docs 中的建议使用 ConnectedProps。不幸的是，它似乎没有得到正确的调度类型（特别是，它认为它具有正常的 Dispatch 类型而不是 ThunkDispatch）。

有什么建议吗？目前我是：

(1) 使用自定义的“useThunkDispatch”挂钩。但这引入了我并不真正想要的额外行 + 导入。

(2) 使用 'mapDispatch' 的函数版本，将我的调度明确键入为 ThunkDispatch（或 redux toolkit docs 中看到的 AppDispatch

代码沙盒： https://codesandbox.io/s/connectedprops-typing-for-thunk-uyplw

【问题讨论】：

你能发布一些额外的代码+信息，说明它在哪里以及如何“没有得到dispatch的类型”吗？（理想情况下是演示编译错误的 CodeSandbox。）如果您使用的是 mapDispatch + ConnectedProps<T>，关键是您甚至不应该对 dispatch 本身有任何引用 - 它只是为您绑定动作创建者道具。
@markerikson 在上面更新以包含 CodeSandBox！是的，就 mapDispatch 达成了一致，但是有两个问题：（1）似乎我必须明确使用函数形式并将 Dispatch 强制转换为 ThunkDispatch，否则会推断出正常的调度并且映射的 Thunks 有打字稿错误。根据redux docs我应该使用对象形式，但在这个例子中似乎不可能。 (2) 实际上我更喜欢不使用 mapDispatch - 我喜欢在我的代码中非常明确地看到与 redux 相关的内容以及与状态相关的内容。我知道这违背了 redux 风格的建议

标签： typescript redux react-redux redux-thunk

【解决方案1】：

根据您的评论，来自connect 的dispatch 的显式使用实际上是这里的问题。

因为您的 Redux 存储与使用该存储的 React 组件是分开定义的，所以它们无法知道您在创建存储时可能使用了哪些自定义设置。特别是对于 TS，connect 无法知道您的商店是否应用了 thunk 中间件，因此应该将dispatch 属性键入为ThunkDispatch 而不是Dispatch。

这就是我们强烈建议将the "object shorthand" form of mapDispatch 与connect 一起使用的原因之一，因为这样您的组件就不必知道它们之间的区别。

如果你真的想在你的组件中明确引用dispatch，你有几个不同的选择：

改用the React-Redux hooks API和declare the type of dispatch as received from useDispatch
使用the function form of mapDispatch 和connect，并明确声明dispatch 的类型作为参数

就个人而言，我建议使用钩子。

【讨论】：

感谢马克的建议。我已经稍微更新了 CodeSandbox 以包含三个组件，它们分别使用基于 connect / hook / mapDispatch 的调度。据我所知，基于对象的 mapDispatch 完全放弃了类型安全——我什至可以为它提供一个没有“类型”属性的函数，它不会抱怨！也许这无关紧要——正如 GitHub 上所讨论的，无论如何我们总是使用导入的动作……另一方面，钩子做得很好——它们正确地挑选出不属于联合类型的动作。有兴趣听听您对 mapDispatch “缺点”的看法吗？