Question

如何使用带参数和 Typescript 的 createSelector？

2021-03-09

27417

typescript redux-toolkit reselect

我使用 redux-toolkit 来生成选择器。我想在我自己带有参数的自定义 reselect 选择器中使用它们。但我不知道如何输入选择器的返回类型？

const selectOrganizationName = (id: string): ??? =>
  createSelector(
    [(state: RootState) => organizationSelectors.selectById(state, id)],
    organization => organization.name
  );

export default selectOrganizationName;

Missing return type on function.eslint@typescript-eslint/explicit-module-boundary-types

Answer 1

请记住，此警告仅由于您的 ESLint 设置需要显式返回类型而出现。Typescript 能够正确推断类型。

当您调用 selectOrganizationName 函数时，您将返回一个选择器，该选择器采用 RootState 并返回组织名称 string | undefined 。

type Return = (state: RootState) => string | undefined;

const selectOrganizationName = (id: string): Return =>
  createSelector(
    [(state: RootState) => organizationSelectors.selectById(state, id)],
    (organization) => organization?.name
  );

但是，您可能有很多要为其创建返回类型的选择器，因此您可以创建一个辅助类型，该类型自动包含您的 RootState ，只需要您设置选择的类型。

type Selector<S> = (state: RootState) => S;

const selectOrganizationName = (id: string): Selector<string | undefined> =>
  createSelector(
    [(state: RootState) => organizationSelectors.selectById(state, id)],
    (organization) => organization?.name
  );

Typescript Playground Link

Answer 2

对于我来说，一旦我为自定义参数添加选择器，它就会破坏整个文件的 TS（所有选择器的返回类型都变成了 any ）。

export const mappedFavouritesSelector = createSelector(
  // ...Other selectors...
  (_, hkSpotEnabled) => hkSpotEnabled,
  (
    // ...Other selector results...
    hkSpotEnabled,
  )

但是当我将参数选择器拉出到 const 函数时，问题就消失了🤷‍♂️：

const hkSpotEnabledSelector = (_: RootState, hkSpotEnabled: boolean) =>
  hkSpotEnabled;

export const mappedFavouritesSelector = createSelector(
  // ...Other selectors...
  hkSpotEnabledSelector,
  (
    // ...Other selector results...
    hkSpotEnabled,
  )