javascript - @reduxjstoolkit - createSelector with parameters - Stack Overflow

admin管理员组

文章数量:1123600

I have a ReactJS app with Redux and a couple of createSelector but some of them I would like to change.

Here are examples of the current selectors:

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

Now what I would like to do is that getNextPageToRender also makes usage of the getAppData selector.

I have tried:

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

And I also tried:

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

But this syntax does not seem to work.

Can someone help? What am I doing wrong?

I have a ReactJS app with Redux and a couple of createSelector but some of them I would like to change.

Here are examples of the current selectors:

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

Now what I would like to do is that getNextPageToRender also makes usage of the getAppData selector.

I have tried:

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

And I also tried:

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

But this syntax does not seem to work.

Can someone help? What am I doing wrong?

• javascript
• typescript
• redux
• redux-toolkit

Share Improve this question Follow edited 23 hours ago Drew Reese 202k1717 gold badges228228 silver badges264264 bronze badges asked yesterday GutelaunetypGutelaunetyp 1,88244 gold badges2222 silver badges4141 bronze badges 2

• What is getAppData? Did you mean you want to use the getApplicationLoadState selector in the updated getNextPageToRender selector? Does getApplicationLoadState return the "appData` you want to use, e.g. that appData.pagesToRender value? – Drew Reese Commented yesterday
• @DrewReese I have edited the post. Please have a look. The getAppData is a representation of state[appData-${getUniquishModuleId()}] – Gutelaunetyp Commented 23 hours ago

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The first argument to createSelector is an array of input selector functions, and the second argument is the output selector function where the function args are the results of the input selectors.

Replace the first input selector function with getAppData, and access the appropriate pagesToRender property.

Using createSelector and declaring an output function that returns the input, i.e. value => value, is anti-pattern. See Identity Function Check for details.

Selecting the appData is a simple selector. It is also strongly suggested to use a consistent naming convention when creating selector functions, e.g. using a select- prefix.

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

Create an intermediate selector that intakes the selectAppData selector and outputs the pagesToRender value.

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

本文标签： javascriptreduxjstoolkitcreateSelector with parametersStack Overflow