ngxs - 状态基类中内存选择器的指南

Question

我对 NGXS Store 以及状态类层次结构中记忆化的 @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