如何定义为我的应用键入的 createSelector 版本？

Question

在 redux-toolkit 文档中，他们建议您创建以下定义，以便在使用 useSelector 挂钩时具有正确的类型：

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

这将使您不必键入具有根状态的所有选择器。

然而，当需要使用 createSelector 定义记忆选择器时，没有关于如何做类似事情的说明。是否有任何快捷方式，或者我必须手动输入每个记忆选择器？

Answer 1

我正在开发一款我也想做的应用程序。为了我的需要，我只想要一个简单的选择器，所以我这样做了：

// store.ts

// …omitted store configuration

export type RootState = ReturnType<typeof store.getState>;

// create a generic type called AppSelector
export type AppSelector<Return> = (state: RootState) => Return
// create a custom `createSelector` that uses the type above
export const createAppSelector = <R>(selector: AppSelector<R>): AppSelector<R> => selector

有了上面的类型，我们可以做以下事情：

const selectTitle: AppSelector<string> = (state) => state.title;
// Note that using the AppSelector type requires you to always pass the return type argument
// It's much easier to use the createAppSelector function
// selectTitle and selectTitle2 accomplish the same thing
const selectTitle2 = createAppSelector((state) => state.title);

在 createAppSelector 中时，state 将正确地具有 RootState 类型。

这种形式的局限性在于，与 createSelector 不同，createAppSelector 只允许您创建一个选择器，不允许您组合或改变选择。

希望有一天我们会有办法 const createAppSelector: TypedCreateSelector<RootState> = createSelector;

如何定义为我的应用键入的 createSelector 版本？

How to define a version of createSelector typed for my app?

typescript

react-redux

typescript-typings

redux-toolkit

reselect