如何将 createSelector 与参数和 Typescript 一起使用？

Question

我用redux-toolkit到generate selectors。我想在我自己的带有参数的自定义 reselect 选择器中使用它们。但是我不知道如何输入我的选择器的 return 类型？

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 设置需要显式 return 类型时出现。 Typescript 能够正确推断类型。

当您调用 selectOrganizationName 函数时，您 return 一个带有 RootState 和 return 组织名称的选择器 string | undefined。

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

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

然而，您可能有很多选择器需要为其创建 return 类型，因此您可以创建一个自动包含 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

如何将 createSelector 与参数和 Typescript 一起使用？

How to use createSelector with parameter and Typescript?

typescript

redux-toolkit

reselect