Início / coding / Perguntas / 79345051
Accepted
Gutelaunetyp
Asked: 2025-01-10 16:35:39 +0800 CST

@reduxjs/toolkit - createSelector com parâmetros

  • 772

Tenho um aplicativo ReactJS com Redux e alguns createSelector, mas gostaria de alterar alguns deles.

Aqui estão alguns exemplos dos seletores atuais:

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];
  },
);

Agora o que eu gostaria de fazer é getNextPageToRenderusar também o getAppDataseletor.

Eu tentei:

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];
  },
);

E eu também tentei:

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];
  },
);

Mas essa sintaxe parece não funcionar.

Alguém pode ajudar? O que estou fazendo errado?

javascript

1 respostas

  1. Best Answer

    O primeiro argumento createSelectoré uma matriz de funções de seletor de entrada, e o segundo argumento é a função de seletor de saída, onde os argumentos da função são os resultados dos seletores de entrada.

    Substitua a primeira função do seletor de entrada por getAppDatae acesse a pagesToRenderpropriedade apropriada.

    Usar createSelectore declarar uma função de saída que retorna a entrada, ou seja value => value, é antipadrão. Veja Identity Function Check para detalhes.

    Selecionar o appDataé um seletor simples. Também é fortemente sugerido usar uma convenção de nomenclatura consistente ao criar funções seletoras, por exemplo, usando um select-prefixo.

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

    Crie um seletor intermediário que receba o selectAppDataseletor e emita o pagesToRendervalor.

    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

relate perguntas