zoukankan      html  css  js  c++  java
  • [NGXS] Select

    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);
        };
      }
    }
  • 相关阅读:
    bestcoder #66
    uva11093 Just Finish it up
    UVA 12627 Erratic Expansion
    uva714 Copying Books
    龟兔赛跑
    神、上帝以及老天爷
    不容易系列之(3)―― LELE的RPG难题
    C. Watto and Mechanism
    Phone List hdu1671
    B. Han Solo and Lazer Gun
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12202689.html
Copyright © 2011-2022 走看看