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);
        };
      }
    }
  • 相关阅读:
    BZOJ5104 二次剩余板子
    BZOJ5329 [Sdoi2018]战略游戏 圆方树+虚树
    BZOJ1095 动态点分治
    BZOJ3992: [SDOI2015]序列统计
    kd-tree板子
    thusc2018翻车记
    BZOJ5336 DP套DP
    BZOJ4316 仙人掌DP
    问题 F: 最小花费
    问题 C: 热浪
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12202689.html
Copyright © 2011-2022 走看看