How does Ngrx triggers Angular's Change Detection in OnPush strategy

Question

With Angular OnPush strategy, the change detection gets triggered only if an @Input() variable is changed by ref.

However when using Ngrx, we subscribe to the store's selectors, and Angular's OnPush strategy detect changes in these subscriptions even if they're not passed in input variables.

My question is how does this work? How is it that with OnPush strategy Angular detect changes in Ngrx store without them being passed through input variables?

I tried searching for the answer in the api, then tried to scan Ngrx code in Github, but had no luck so far. If you know where is the piece of Ngrx code responsible for this that I'm missing in source code you'd would make my day.

Answer 1

OnPush does not search an object tree for changes if the reference to the object does not change.

prop = { val: 1 };

and in the template

{{ prop.val }}

If you are using OnPush

prop.val = 2;

will not update the binding because it will not check the object for changes as it is the same reference.

You would need to use

prop = { val: 2 };

As the reducer in NgRx should be using pure functions that do not mutate objects but creates new instances of objects you should be confident in using OnPush change detection.

Don't take the path to poisoning your project with the madness that lies down the path of NgRx. Redux does not belong in the Angular eco system. Learn RxJs and how to develop well constructed services with behavior subjects and you can also use OnPush if your behavior subjects only emit new objects rather than mutating objects.

Angular needs to shake this common misconception that NgRx is the goto Angular state management pattern. I was at a talk by Mike Ryan from the NgRx core team a few weeks ago and my question was about how he felt about this misconception and how many newbs jump straight in to using it, his response was that over use was something the team needs to address.