angular - 使用ngrx获取store的当前状态一次

Question

您好，我想知道是否有人知道如何在无需订阅的情况下一次性获取商店的当前状态。我目前正在使用 ngrx 订阅商店并访问其状态以设置组件的属性，但由于我订阅了该属性，因此它会不断刷新。因此，我正在寻找一种只获取此属性一次的方法，这样我就可以在不不断刷新的情况下显示数据。

以防万一，这发生在我组件的构造函数中。

我一直在尝试这样的事情:

_store.select('storeData.correlationData');

订阅时我会这样访问:

_store.subscribe(
  (state) => {
    this.correlationData = state.storeData.correlationData;
  }
);

编辑

应用状态:

export interface ApplicationState {
  uiState: UiState;
  storeData: StoreData;
}

Answer 1

您可以创建getState() 函数，将其放在共享模块中并在需要的地方导入。关键是使用 take(1) 运算符使其同步:

export function getState(store: any, selector: string) {
  let _state: any;
  store.take(1).subscribe(o => _state = o);
  return _state;
}

这是我正在使用的更高级的版本:

export function getState(store: any, selector?: any) {
  let _state: any;
  let state$: any;

  if (typeof selector === 'string' && /\./g.test(selector)) {
    state$ = store.pluck(...selector.split('.'));
  } else if (typeof selector === 'string') {
    state$ = store.map(state => state[selector]);
  } else if (typeof selector === 'function') {
    state$ = store.map(state => selector(state));
  } else {
    state$ = store;
  }
  state$.take(1)
    .subscribe(o => _state = o);
  return _state;
}

有了它，您可以通过几种不同的方式获取状态:

getState(this.store) // all data in Store
getState(this.store, 'users')
getState(this.store, state => state.users)
getState(this.store, 'users.address.street') // Cool!

谨慎使用!

正如@Maximes 在评论中指出的，您应该尝试在代码中直接使用 Observables 并使用此方法进行测试。