How to implement ngxsOnChanges in a component

Question

I have two properties in state model, and I need an event on each one of them separately, but when both change at the same time I receive two events and I need only one something like ngxsOnChanges

Answer 1

You can use a selector to combine both of them and then you will be able to subscribe to this selector and use a debounce.

Answer 2

You can join multiple selectors using the @Selector decorator, but take care of the injectContainerState selector option, which is disabled by default in NGXS v4 (It's better to set it to false if you're using NGXS v3.x)

Then, you can subscribe to the new selector in your component.

 @Selector([ZooState, PreferencesState])
 static firstLocalPanda(state: string[], preferencesState: PreferencesStateModel) {
   return state.find(
     s => s.indexOf('panda') > -1 && s.indexOf(preferencesState.location)
   );
 }

 @Selector([ZooState.firstLocalPanda])
 static happyLocalPanda(panda: string) {
   return 'happy ' + panda;
 }

To learn more about joining selectors: https://www.ngxs.io/concepts/select#joining-selectors