javascript - 在 API 调用 NgRx Angular 之前检查商店

Question

我正在创建 NgRx 应用程序，但我对它的实现感到很困惑，因为它是我第一个使用 NgRx 的应用程序。
我有一家商店 《公司》状态。我必须搜索这些公司，如果找到就返回。
如果找不到所需的公司，它应该调用 API 并同样获取结果，但该过程是循环的并且运行无限时间。

这是我的代码:

    this.companySearchCtrl.valueChanges
      .pipe(
        debounceTime(300),
        distinctUntilChanged()
      )
      .subscribe(val => {
        if (val !== ' ' || val !== '') {
          this.store.select(getCompanys).subscribe(data => {
            console.log(data);
//filter companies on the basis of search text
            const filteredData = data.filter(x =>
              x['name']
                .toLowerCase()
                .startsWith(this.companySearchCtrl.value.toLowerCase())
            );
            console.log(filteredData);
            if (filteredData.length === 0) { //if data is not found in store
              console.log('got a call');
              this.store.dispatch(
                new CompanyActions.find({
                  where: { name: { regexp: `${val}/i` } } // call to API to search with regExp
                })
              );
            } else {
// if required data found in store
              console.log('got no call');
              this.filteredCompanies$ = of(filteredData);
            }
          });
        }
      });

如果在存储中找到数据，则此过程运行良好。如果在商店中找不到数据，或者我没有从 API 调用中得到任何结果，它会无限运行。
我怎样才能做到这一点？

Answer 1

做一些约定:

state.Companies = null如果尚未向服务器发送请求，则为初始状态

state.Companies = []是发送第一个请求后的状态，但没有从服务器返回任何公司

使用 createSelector根据您需要的标准过滤您的公司

使用 withLatestFrom在您的效果中，这将使您能够检查效果中的商店状态

现在，把逻辑反过来:

当你寻找公司时，首先触发一个会触发效果的 Action

在这种情况下，检查 state.Companies是 null与否

如果它的null > 消防 api 请求

如果它不是 null > 触发一个 Action ，该 Action 将触发选择器进行过滤

如果即使 state.Companies 也找不到数据不是 null这意味着您需要刷新 Companies集合或服务器上不存在该值