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



根据标题,我使用的是Redux Toolkit&打字。特别是,我正在尝试使用redux文档中建议的ConnectedProps。不幸的是,它似乎没有得到正确的调度类型(特别是,它认为它具有正常的dispatch类型,而不是ThunkDispatch(。

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

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

(2( 使用"mapDispatch"的函数版本,显式地将我的调度键入为ThunkDispatch(或redux工具包文档中的AppDispatch

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

根据您的评论,明确使用来自connectdispatch实际上是这里的问题。

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

这就是为什么我们强烈建议将mapDispatch的"对象简写"形式与connect一起使用的原因之一,因为这样您的组件就不必知道其中的区别。

如果您真的想在组件中显式引用dispatch,您有两个不同的选项:

  • 切换到使用React-Redux挂钩API,并声明从useDispatch接收到的dispatch的类型
  • mapDispatch的函数形式与connect一起使用,并显式声明dispatch的类型作为参数

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

最新更新