Question

我对NGXS商店以及状态类层次结构中记忆化@Selector()的用法有疑问。

对于以下所述问题，推荐的方法是什么？ NGXS商店文档未提供这方面的指南/建议。

给出此示例状态设置，

export interface BaseModel { data: string[]; }

// base class not a state!
export class BaseState {
  @Selector()
  static dataSelect(state: BaseModel) { return state.data; }

  // ...
}

export interface DerivedModel extends BaseModel {}

@State<DerivedModel>({ name: 'derived'; })
export class DerivedState extends BaseState {
  // ...
}

export interface UsingModel { thing: number; }

@State<UsingModel>({ name: 'using'; })
export class UsingState implements NgxsOnInit {

  constructor(private _store: Store) {}

  ngxsOnInit(ctx: StateContext<UsingModel>) {
    // have this state update when derived state changes
    this._store.select(DerivedState.dataSelect).subscribe(data => console.log(data));
  }

  // ...
}

当运行这段代码时，它将打印出undefined，因为state参数 dataSelect(...)方法的设置将不会被设置。

我跟踪了原因，发现BaseState不是NGXS国家，因此错过了内部NGXS_META 属性，该属性继而导致undefined参数。将BaseState添加到选择器（例如@Selector([BaseState])）以强制状态为包括在内也没有达到预期的效果，因为现在NGXS无法导航到匹配的状态片。

我发现了两种方法可以根据需要进行此工作： 1.在每个派生状态实现中复制@Selector(...)方法。但是，这克服了最初设计状态类层次结构的原因。 2.使用@DerivedSelector(...)之类的东西，它根据标准装饰器工作，但会在遇到每个派生状态类时动态创建选择器。

谢谢。

Answer 1

据我所知，使用@Selector注释无法实现，但是只能使用createSelector()。

export class BaseState {
  static dataSelect() {
    return createSelector(
      [this],
      (state: BaseModel) => {
        return state.data;
      }
    );
  }

  //...
}

如果您这样更改基本状态，则代码将起作用。有关详细信息，请参见NGXS docs

状态基类中的记忆选择器准则

1 个答案: