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);
        };
      }
    }
  • 相关阅读:
    【算法】百度百科经典算法链接集
    【剑指offer】38.字符串的排列
    Spring整合RabbitMQ
    JVM对象的内存分配,内存布局和访问定位
    记一次需求的表结构设计变更
    sql server中的系统数据库
    HttpWebRequest / HttpWebResponse 远程获取文件信息
    XML的操作
    对于XML无法传输转义字符的问题
    还原数备份文件 SQL语句
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12202689.html
Copyright © 2011-2022 走看看