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

Posted 2023-02-22

【中文标题】使用 ConnectedProps 和 redux-thunk 获取正确的调度类型

【英文标题】：Get correct dispatch type using ConnectedProps with 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 风格的建议

【参考方案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 “缺点”的看法吗？