Angular/NGRX: Strange behaviour with entity and selectAll?

391 Views Asked by At

seletAll from getSelectors() fire event without change into own feature store, but when the root store changes.

Open the the demo and click on the button. The button dispatch a change into the root store, but selectAll from the feature store also fire the event:

https://stackblitz.com/edit/angular-ngrx-test-123654789-a7js8p?file=src%2Fapp%2Ffeatures%2Fbar.component.ts

enter image description here

this behaviour happens only if seletAll is used into other selector that accept props as parameter.

seletAll should fire events only when the changes comes into the feature store.

This is the selectors:

export const selectBarStore = createFeatureSelector<State>('barStore');

export const selectBarState = createSelector(
  selectBarStore,
  (state: State) => state ? state.bar : null
);

export const { selectEntities, selectAll } = adapter.getSelectors(selectBarState);

export const selectBarById = createSelector(
  selectAll,
  (itemEntities: Bar[], props: {id: number}) =>
  itemEntities ? itemEntities.filter(element => element.id === props.id) : []
);

UPDATE 1:

I have also opened an issue on ngrx github https://github.com/ngrx/platform/issues/2707

A ngrx developer say

I'm not sure if this is a bug, and if it is a bug, how to fix it. The root cause is the props selector, which shares the same selectAll instance (because it passes down the props to selectAll).

UPDATE 2

The workaround is make the selector a factory and DON'T pass props parameter:

BEFORE

export const selectBarById = createSelector(
  selectAll,
  (itemEntities: Bar[], props: {id: number}) =>
  itemEntities ? itemEntities.filter(element => element.id === props.id) : []
);

AFTER

export const selectBarById = (id: number) => createSelector(
  selectAll,
  (itemEntities: Bar[]) =>
  itemEntities ? itemEntities.filter(element => element.id === id) : []
);

The main question is: It is a NGRX bug or I'm doing wrong something?

0

There are 0 best solutions below