使用带有Redux-thunk的ConnectedProps获取正确的调度类型

Question

按照标题，我正在使用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

Answer 1

根据您的评论，实际上来自这里dispatch的{​​{1}}的使用是一个问题。

由于Redux存储区与使用该存储区的React组件是分开定义的，因此它们无法知道创建存储区时可能使用了哪些自定义设置。具体来说，对于TS，connect无法知道您的商店已应用了thunk中间件，因此应将connect道具键入为dispatch而不是ThunkDispatch。 / p>

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

如果您确实想在组件中显式引用connect，则有两种选择：

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

我个人建议使用钩子。