[NGXS] Select - 1

1. Selet piece of state from Store:

This is useful when you just want to get state from the store directly. Of course that global state should contain the data you want to get.

import { Select } from '@ngxs/store';
import { ZooState, ZooStateModel } from './zoo.state';

@Component({ ... })
export class ZooComponent {
  // Reads the name of the state from the state class
  @Select(ZooState) animals$: Observable<string[]>;

  // Uses the pandas memoized selector to only return pandas
  @Select(ZooState.pandas) pandas$: Observable<string[]>;

  // Also accepts a function like our select method
  @Select(state => state.zoo.animals) animals$: Observable<string[]>;

  // Reads the name of the state from the parameter
  @Select() zoo$: Observable<ZooStateModel>;
}

 

2. Select state which is not part of global state directly

For example you have state:

state = {
    birds: [
        { type: 'bird': color: 'green' , categories: [...]},
        { type: 'bird': color: 'red' , categories: [...]},
        { type: 'bird': color: 'black' , categories: [...]},    
     ]
}

If you only want to get the bird with color: 'red':

import { State, Selector } from '@ngxs/store';
...

@State<string[]>({
  name: 'birds',
  defaults: []
})
export class ZooState {
  @Selector()
  static redBirds(state: Bird[]) {
    return state.filter(s => s.color === 'red');
  }
}

From component:

@Component({...})
export class AppComponent {
  @Select(ZooState.redBirds) birds$: Observable<string[]>;
}

 

3. Dynamic selectors

Using previous example, it is a little bit unconvenient to define different color bird one by one. It would be better to pass an arguement directly to the select() to tell what color of bird we need.

import { Store } from '@ngxs/store';
import { map } from 'rxjs/operators';

@Component({ ... })
export class ZooComponent {

  @Select(ZooState.colorBirds('red'))
  redBirds$: Observable<string[]>;

  @Select(ZooState.colorBirds('green'))
  greenBirds$: Observable<string[]>;

}

To do that we need dynamic selector:

@State<string[]>({
  name: 'birds',
  defaults: []
})
export class ZooState {
  static colorBirds(color: string) {
    return createSelector(
      [ZooState],
      (state: string[]) => {
        return state.filter(s => s.color === color);
      }
    );
  }
}

 

4. Lazy Selector:

To create a lazy selector all that you need to do is return a function from the selector. The function returned by the selector will be memoized automatically and the logic inside this function will be evaluated at a later stage when the consumer of the selector executes the function. Note that this function can take any number of arguments (or zero arguments) as it is the consumer's responsibility to supply them.

For instance, I can have a Lazy Selector that will filter my pandas to the provided type of panda.

@State<string[]>({
  name: 'animals',
  defaults: []
})
export class ZooState {
  @Selector()
  static pandas(state: string[]) {
    return (type: string) => {
      return state.filter(s => s.indexOf('panda') > -1).filter(s => s.indexOf(type) > -1);
    };
  }
}