Redux Toolkit Dispatch 类型智能感知

Question

我遵循了 redux 工具包 typescript doc。文档说要创建下面给出的自己的 useDispatch 挂钩

export const useAppDispatch = () => useDispatch<AppDispatch>()

并在组件中使用如下方式

const dispatch = useAppDispatch();
const increase = () => {
  dispatch(increase());
}

一切正常。但我所期望的 dispatch 应该具有所有缺失操作的 IntelliSense。我的问题是如何实现这些类型，以便我能够从打字稿获得帮助，哪些操作允许用于分派参数。

在悬停调度功能上显示以下类型

const dispatch: <AnyAction>(action: AnyAction) => AnyAction

如有任何帮助，我们将不胜感激。

Answer 1

有了 Redux，任何动作都可以随时调度。因此，尝试限制可以在类型级别分派的操作在概念上没有任何意义。有许多“Redux + TS”库和文章试图实现这种方法，但我们的维护者认为它没有用。

有关详细信息，请参阅 Redux 维护者 Lenz Weber 的 post Do Not Create Union Types with Redux Actions。

也就是说，我至少希望将鼠标悬停在 useAppDispatch 上会产生看起来更像这样的 TS 类型：

(alias) useAppDispatch(): ThunkDispatch<CombinedState<{
    // fill in actual state fields for your app here
}>, null, AnyAction> & ThunkDispatch<...> & Dispatch<...>
import useAppDispatch

仔细检查您的应用设置并确保您使用 RTK configureStore 来创建商店。

Redux Toolkit Dispatch 类型智能感知

Redux Toolkit Dispatch type intellisense

typescript

reactjs

redux

redux-toolkit