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

编程问答 2022-05-22

问题描述

我使用 redux-toolkit 到 generate selectors。我想在我自己的带有参数的自定义 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

解决方法

请记住，此警告仅由于您的 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,(organization) => organization?.name
  );

Typescript Playground Link

redux-toolkitreselectreselectreselecttypescripttypescripttypescript