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

    Problem:

    // counter.state.ts
    export interface CounterStateModel {
      counter: number;
    }
    
    @State<CounterStateModel>({
      name: 'counter',
      defaults: {
        counter: 0
      }
    })
    export class CounterState {}
    
    // counter.query.ts
    export class CounterQuery {
      @Selector([CounterQuery.getCounter])
      static getCounterCube(counter: number): number {
        return counter ** 3;
      }
    
      // Note: this selector being declared after its usage will cause an issue!!!
      @Selector([CounterState])
      static getCounter(state: CounterStateModel): number {
        return state.counter;
      }
    
      @Selector([CounterQuery.getCounter])
      static getCounterSquare(counter: number): number {
        return counter ** 2;
      }
    }

    Two ways to solve the problem:

    1. Change the order:

    export class CounterQuery {
      @Selector([CounterState])
      static getCounter(state: CounterStateModel): number {
        return state.counter;
      }
    
      @Selector([CounterQuery.getCounter])
      static getCounterCube(counter: number): number {
        return counter ** 3;
      }
    
      @Selector([CounterQuery.getCounter])
      static getCounterSquare(counter: number): number {
        return counter ** 2;
      }
    }

    2. Using createSelector:

    export class CounterQuery {
      static getCounterCube() {
        return createSelector(
          [CounterQuery.getCounter()],
          (counter: number) => counter ** 3
        );
      }
    
      static getCounter() {
        return createSelector(
          [CounterState],
          (state: CounterStateModel) => state.counter
        );
      }
    
      static getCounterSquare() {
        return createSelector(
          [CounterQuery.getCounter()],
          (counter: number) => counter ** 2
        );
      }
    }
  • 相关阅读:
    软件开发规范
    Fail2ban + firewalld 防护doss攻击
    SourceTree&Git部分名词解释
    训子
    一个网络下,手机如何访问本地网址
    tempalte.js的一般用法
    template.js的介绍
    获取URL中的参数
    js判断苹果和安卓端或者wp端
    HTML5与WebGL编程
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12202730.html
Copyright © 2011-2022 走看看