状态库中的记忆选择器指南 class

Question

我有一个关于 NGXS Store 和记忆 @Selector()s 在状态 class 层次结构中的使用的问题。

解决下述问题的推荐方法是什么？ NGXS 商店文档在这方面没有提供 guideline/recommendation。

鉴于此示例状态设置，

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])）强制状态仍然是 included 也没有达到预期的效果，因为现在 NGXS 无法导航到匹配的状态切片。

我找到了两种方法来按需完成这项工作： 1. 在每个派生状态实现中复制 @Selector(...) 方法。这虽然违背了最初设计状态 class 层次结构的原因。 2. 使用类似 @DerivedSelector(...) 的东西，它根据标准装饰器工作，但动态创建选择器用于每个遇到的派生状态 classes.

谢谢。

Answer 1

据我所知，使用 @Selector 注释无法实现，但可以使用 createSelector().

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

  //...
}

如果您像这样更改基本状态，您的代码将起作用。详情请参考NGXS docs

状态库中的记忆选择器指南 class

Guideline for memoized selectors in state base class

ngxs