Derived state where a selector depends on the results of another selector.

[Quraian]

I am trying to figure out how to do something like the following:

export const selectById = (id: string) =>
  createSelector(selectEntities, (entities) => entities.items.find((entity) => entity.id === id));

export const selectEntity = createSelector(routerSelectors.selectQueryParam('id'), selectById, (_, entity) => entity);

So, basically one selector depends on the result of a previous selector, how to do this in a clean way?

[markostanimirovic]

@Quraian

You can do the following:

export const selectEntityFromRoute = createSelector(
  selectEntities,
  routerSelectors.selectQueryParam('id'),
  (entities, id) => entities.find((entity) => entity.id === id)
);

[Quraian]

Hi @markostanimirovic

Thanks, however, my question is more about being able to compose selectors in a more reusable way.

In your case say that I want the "find by id" as a selector on itself. So, I want selectEntityFromRoute selector to be composed of routerSelectors.selectQueryParam and selectById selectors, so that selectById is depending on the result of the other selector.

[markostanimirovic]

@Quraian

You can create a helper function and use it as a projector for multiple selectors:

function getEntityById(entities: Entity[], id: string | undefined): Entity | undefined {
  return entities.find((entity) => entity.id === id);
}

export const selectEntityFromRoute = createSelector(
  selectEntities,
  routerSelectors.selectQueryParam('id'),
  getEntityById
);

export const selectActiveEntity = createSelector(
  selectEntities,
  selectActiveEntityId,
  getEntityById
);

// factory selector
export const selectEntityById = (id: string) => createSelector(
  selectEntities,
  (entities) => getEntityById(entities, id)
);

[Quraian]

Thanks @markostanimirovic

I guess this is the closest to what I had in mind. Really appreciate your help!

[david-shortman]

@Quraian, By delaying the collection of the id param until later, you can use the result of selectQueryParam('id") to select an entity by id!

export const selectByIdFunc = createSelector(
  selectEntities,
  //             👇 we return a function that takes in an id and returns the correct entity
  (entities) => (id: string) => entities.items.find((entity) => entity.id === id)
);

export const selectEntity = createSelector(
  routerSelectors.selectQueryParam('id'),
  selectByIdFunc,
  (id, getEntityById) => getEntityById(id));

Memoization still works properly, as selectByIdFunc will only change when entities change, and selectEntity will only change when the query param for "id" changes or the entities change.

[david-shortman]

Also you can create a reusable selectById like so:

export const selectById = (id: string) => createSelector(
  selectByIdFunc,
  getEntityById => getEntityById(id)
);

[Quraian]

YES! this what I was looking for, never thought of doing it this way but I knew there must be a better way.

Thanks a lot @david-shortman !!