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

Question

我正在开发功能，如果状态中的加载或加载的值为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（）中调用此类方法如我所见，没有任何东西以这种方式发送。也许您对实现此类功能有建议？

Answer 1

您可以将两个选择器与RxJ的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)，如您所用，将从[​​C0]中获取第一个值，然后完成。考虑到您的商店处于初始状态，两个选择器都将在初始化时返回值。