主页 / coding / 问题 / 79345051
Accepted
Gutelaunetyp
Asked: 2025-01-10 16:35:39 +0800 CST

@reduxjs/toolkit - 带参数的 createSelector

  • 772

我有一个带有 Redux 和几个createSelector 的ReactJS 应用程序，但我想更改其中一些。

以下是当前选择器的示例：

export const getAppData = createSelector(
  (state: RootState): AppDataState => state[`appData-${getUniquishModuleId()}`],
  (appData: AppDataState): AppDataState => appData,
);

export const getNextPageToRender = createSelector(
  [
    (state: RootState): PageSlug[] =>
      state[`appData-${getUniquishModuleId()}`].pagesToRender,
    (_: RootState, currentPageSlug: PageSlug): PageSlug => currentPageSlug,
  ],
  (pagesToRender: PageSlug[], currentPageSlug: PageSlug): PageSlug => {
    const currentPageIndex: number = pagesToRender.findIndex(
      (page: PageSlug) => page === currentPageSlug
    );
    return pagesToRender[currentPageIndex + 1];
  },
);

现在我想做的是getNextPageToRender也使用getAppData选择器。

我尝试过：

export const getNextPageToRender = createSelector(
  getAppData,
  [
    (appData: AppDataState): PageSlug[] =>
      getContextRelatedAppData(appData).pagesToRender,
    (_: AppDataState, currentPageSlug: PageSlug): PageSlug => currentPageSlug,
  ],
  (pagesToRender: PageSlug[], currentPageSlug: PageSlug): PageSlug => {
    const currentPageIndex: number = pagesToRender.findIndex(
      (page: PageSlug) => page === currentPageSlug
    );
    return pagesToRender[currentPageIndex + 1];
  },
);

我也尝试过：

export const getNextPageToRender = createSelector(
  [
    getAppData,
    (appData: AppDataState): PageSlug[] =>
      getContextRelatedAppData(appData).pagesToRender,
    (_: AppDataState, currentPageSlug: PageSlug): PageSlug => currentPageSlug,
  ],
  (pagesToRender: PageSlug[], currentPageSlug: PageSlug): PageSlug => {
    const currentPageIndex: number = pagesToRender.findIndex(
      (page: PageSlug) => page === currentPageSlug
    );
    return pagesToRender[currentPageIndex + 1];
  },
);

但这个语法好像不起作用。

有人可以帮忙吗？我做错了什么？

javascript

1 个回答

  1. Best Answer

    第一个参数createSelector是输入选择器函数数组，第二个参数是输出选择器函数，其中函数参数是输入选择器的结果。

    将第一个输入选择器函数替换为getAppData，并访问适当的pagesToRender属性。

    使用createSelector并声明返回输入的输出函数，即value => value，是反模式。有关详细信息，请参阅身份函数检查。

    选择appData是一个简单的选择器。强烈建议在创建选择器函数时使用一致的命名约定，例如使用select-前缀。

    export const selectAppData = (state: RootState): AppDataState =>
  state[`appData-${getUniquishModuleId()}`];

    创建一个中间选择器，接收selectAppData选择器并输出pagesToRender值。

    const selectPagesToRender = createSelector(
  [selectAppData],
  (appData): PageSlug[] => appData.pagesToRender
);

export const selectNextPageToRender = createSelector(
  [
    selectPagesToRender, // <-- add new input selector
    (_: RootState, currentPageSlug: PageSlug): PageSlug => currentPageSlug,
  ],
  (
    pagesToRender,
    currentPageSlug
  ): PageSlug => {
    const currentPageIndex: number = pagesToRender.findIndex(
      (page: PageSlug) => page === currentPageSlug
    );
    return pagesToRender[currentPageIndex + 1];
  },
);
    • 1

相关问题