How to select a single object by id using @ngrx/entity

Question

Using @ngrx/entity I want to select an entity by a single id or an array of entities by an array of ids from an entity map.

I do not want the select subscriptions inside a component to be triggered when the entity collection gets a new element or an entity item changes, which I did not select at all.

This obviously happens to me when I use the selectEntities selector and then pick the IDs from the result.

So how can I select 1 or n items by id from an entity collection?

Answer 1

EDIT: as Ethan mentions below, selectors with props were deprecated in v12. This decision was discussed extensively in an RFC. (Comments further down the thread address how to effectively memoise factory functions.)

The currently recommended approach to this is using a factory function:

export const selectEntity = id => createSelector(
  selectEntities,
  entities => entities[id]
);

export const selectEntitiesByID = ids => createSelector(
  selectEntities,
  entities => ids.map(id => entities[id])
);

Which are called thus:

this.store.pipe(
  select(selectEntity(someID))
);

this.store.pipe(
  select(selectEntitiesByID(arrayOfIDs))
);

---

Previously, NgRx supported parameterised selectors by passing props as the last argument to a selector function:

export const selectEntity = createSelector(
  selectEntities,
  (entities, props) => entities[props.id]
);

export const selectEntitiesByID = createSelector(
  selectEntities,
  (entities, props) => props.ids.map(id => entities[id])
);

These are invoked exactly as you might expect:

this.store.pipe(
  select(selectEntity, { id: someID })
);

this.store.pipe(
  select(selectEntitiesByID, { ids: arrayOfIDs })
);

Answer 2

Selectors with props are deprecated, for more info see RFC: Deprecate Selectors With Props.

However, a type safe alternative is demonstrated in RFC 2980. Applied to the answer from @jordan-gray:

export const selectEntity = (props: { id: number }) =>
  createSelector(selectEntities, (entities) => {
    return entities[props.id];
  });

Called with

this.store.select(selectEntity({ id: myId }));