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

Posted 2023-02-19

【中文标题】ngxs：在 Action 中访问不同的状态

【英文标题】：ngxs: Access different state within Action

【发布时间】：2018-12-23 19:30:51

【问题描述】：

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

场景： 我有两种状态：

过滤器状态 应用状态

FilterState 包含一个动作Filter，当过滤动作被触发时，filterService 被调用，带有动作的有效负载 + 带有来自AppState 的值。

@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 的第二个参数？

【参考方案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);
  
​

【讨论】：

我在使用 selectSnapshot 时仍然不确定

如果其他状态正在异步启动，则使用快照将返回未定义。 here 是我解决这个问题的方法。

【参考方案2】：

选择快照将返回未定义，因为尚未启动其他状态，我已通过使用普通选择和过滤结果解决了问题。

@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);
       )
    );
​