如何在Angular ngrx 8商店中调用API之前检查状态加载和加载的值是否为假？答案

【问题标题】：How to check if state loading AND loaded values are false before calling API in Angular ngrx 8 store?如何在Angular ngrx 8商店中调用API之前检查状态加载和加载的值是否为假？
【发布时间】：2019-11-28 21:21:29
【问题描述】：

我正在开发功能，如果在状态中加载或加载的值是 true，则不需要分派。我在发货前检查商店中的两个值时遇到问题。有没有办法在调度操作之前组合两个选择器？

我需要可以有两种可能的状态形式：

State = {
list: [],
loading: true,
loaded: false
}

或

State = {
list: [],
loading: false,
loaded: true
}

我正在尝试使用两个选择器（我的组件中的方法）：

 checkStore() {
    return this.store.select(getLoading).pipe(
      tap(loading => {
        if (!loading) {
          this.store.select(getLoaded).pipe(
            tap(loaded => {
              if (!loaded) {
                this.store.dispatch(fetchList({ payload: {something} }));
              }
            }),
            take(1)
          );
        } else {
          this.store.dispatch(fetchList({ payload: {something} }));
        }
      }),
      take(1)
    );
  }

然后在 ngOnInit() 中调用这样的方法正如我所见，没有任何东西以这种方式发送。也许您对实现此类功能有建议？

【问题讨论】：

但没有订阅上述内容；如果没有人订阅，则不会启动。如果你想让 Observable 触发，那么你首先需要订阅它。除非你没有在这里粘贴订阅部分？
@RobertDinaro 我在 ngOnInit 上订阅它，只是没有粘贴代码

标签： angular ngrx ngrx-store

【解决方案1】：

您可以将两个选择器与 RxJs 的combineLatest 结合使用。根据其docs

组合多个 Observable 以创建一个 Observable，其值是根据其每个输入 Observable 的最新值计算得出的。

combineLatest([
  this.store.pipe(select(getLoading)),
  this.store.pipe(select(getLoaded)),
])
  .pipe(take(1))
  .subscribe(
    ([loading, loaded]: [boolean, boolean]) => {
      if (!loading && !loaded) {
        this.store.dispatch(fetchList({payload: {something}}));
      }
    }
  );

combineLatest 返回一个新的 Observable，它发出一个包含来自输入 Observables 的最新值的数组，因此您可以解构它们 [loading, loaded]。
然后你可以订阅它并检查它的值。

take(1) 您使用的将获得从combineLatest 发出的第一个值，然后完成。考虑到您的商店有一个初始状态，两个选择器都会在初始化时返回值。

【讨论】：