使用带Redux-Tunk的ConnectedProps获取正确的派单类型

人气:65 发布:2023-01-03 标签: typescript redux react-redux redux-thunk

问题描述

根据标题,我使用的是Redux-Toolkit&;TypeScrip。特别是,我正在尝试使用redux docs中建议的ConnectedProps。遗憾的是,它似乎没有得到正确的派单类型(特别是它认为它具有正常的派单类型,而不是ThunkDispatch)。

有什么建议吗?目前我要么:

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

(2)使用‘mapDispatch’的函数版本,将我的调度显式输入为ThunkDispatch(或redux toolkit docs中所示的AppDispatch)

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

推荐答案

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

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

这是我们强烈建议将the "object shorthand" form of mapDispatchconnect一起使用的原因之一,因为这样您的组件就永远不必知道区别。

如果确实要在组件中显式引用dispatch,则有两个不同的选项:

切换到使用the React-Redux hooks API和declare the type of dispatch as received from useDispatch 将the function form of mapDispatchconnect一起使用,并显式声明dispatch的类型为参数

就我个人而言,我建议使用挂钩。

15