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);
        };
      }
    }
  • 相关阅读:
    微软职位内部推荐-SENIOR SDE
    微软职位内部推荐-Senior Network Engineer
    微软职位内部推荐-Principal Dev Manager
    微软职位内部推荐-SDE II
    微软职位内部推荐-Sr DEV
    【转载】NIO服务端序列图
    【转载】NIO客户端序列图
    同步与异步
    Linux查找命令
    Spring中Bean的实例化
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12202689.html
Copyright © 2011-2022 走看看