[NGXS] Selector - 2 Joining Selectors, compose

When defining a selector, you can also pass other selectors into the signature of the Selector decorator to join other selectors with this state selector.

@State<PreferencesStateModel>({ ... })
export class PreferencesState { ... }

@State<string[]>({ ... })
export class ZooState {

 @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;
 }

}

 

Now the happyLocalPanda will only recalculate when the output value of the firstLocalPanda selector changes.

We recommend that you move your projects to this behavior in order to optimize your selectors and to prepare for the change to the defaults coming in NGXS v4. See the Selector Options section above for the recommended settings.