NgRx selector emits when anything on the state changes/memoization of selector not working

Question

I'm using Angular 7 along with NgRx. I have created a selector to get some data from the store using filter, but this selector emits when anything on the store changes, even if it is not related to my selector.

I have created a demonstration of my issue. Here is my selector:

export const getMyArrayFilter = createSelector(
    getCounterState,
    state => state.myArray.filter(x => x === 'new Item')
);

And here I am using my getMyArrayFilter selector:

this.store.pipe(select(fromRoot.getMyArrayFilter)).subscribe(x => console.log(x));

But as mentioned, this selector will emit anytime anything changes on the state.

Please take a look at this StackBlitz demonstration.

If you try clicking on either the "Add item to array" or "-" or "+" buttons, then my getMyArrayFilter will emit, and log to the console each time. Should't my selector only emit values IF the myArray on my state changes?

I have taken a look at this SOF question which mentions using distinctUntilChanged but that doesn't seem to work for me.

Answer 1

As Alejandro pointed out, this is because there's a new reference for myArray. You can modify the memoization to your needs, Alex Okrushko does exactly this in his talk NgRx: Selectors are more powerful than you think