ngxs：在 Action 中访问不同的状态

Question

是否可以在一个动作中访问不同的状态？

场景：我有两个状态：

过滤状态
应用状态

FilterState 包含一个动作 Filter，当过滤器动作被触发时，然后 filterService 被调用，带有动作的有效载荷 + 来自 [=14] 的值=].

@Action(Filter)
filter(ctx, action) {
  // HOW TO GET VALUE FROM AppState

  return this.filterService.filter(action, valueFromOtherStore).pipe(
    tap(data => {
    // Do something with result
    })
  );
}

如何从不同的状态检索值以将此值应用于 this.filterService.filter 的第二个参数？

Answer 1

Shared State 文档回答了问题：

文档：https://ngxs.gitbook.io/ngxs/advanced/shared-state

要访问不同的状态 selectSnapshot，可以使用 store 上的方法： this.store.selectSnapshot(PreferencesState.getSort)

例子

@State<PreferencesStateModel>({
  name: 'preferences',
  defaults: {
    sort: [{ prop: 'name', dir: 'asc' }]
  }
})
export class PreferencesState {
  @Selector()
  static getSort(state: PreferencesStateModel) {
    return state.sort;
  }
}

@State<AnimalStateModel>({
  name: 'animals',
  defaults: [
    animals: []
  ]
})
export class AnimalState {

  constructor(private store: Store) {}

  @Action(GetAnimals)
  getAnimals(ctx: StateContext<AnimalStateModel>) {
    const state = ctx.getState();

    // select the snapshot state from preferences
    const sort = this.store.selectSnapshot(PreferencesState.getSort);

    // do sort magic here
    return state.sort(sort);
  }

}

Answer 2

选择快照将return未定义，因为其他状态尚未启动，我已经通过使用正常select并过滤结果解决了这个问题。

@State<PreferencesStateModel>({
  name: 'preferences',
  defaults: {
    sort: [{ prop: 'name', dir: 'asc' }]
  }
})
export class PreferencesState {
  @Selector()
  static getSort(state: PreferencesStateModel) {
    return state.sort;
  }
}

@State<AnimalStateModel>({
  name: 'animals',
  defaults: [
    animals: []
  ]
})
export class AnimalState {

  constructor(private store: Store) {}

  @Action(GetAnimals)
  getAnimals(ctx: StateContext<AnimalStateModel>) {
    const state = ctx.getState();

    // select the snapshot state from preferences
    return this.store.select(PreferencesState.getSort)
    .pipe(
       filter(sort => sort !== undefined),
       take(1),
       map(sort => {
           // do sort magic here
           return state.sort(sort);
       })
    );

}

ngxs：在 Action 中访问不同的状态

ngxs: Access different state within Action

ngxs