angular - 在使用可观察对象通过 NGRX 调用 API 之前检查 Angular Store 中的数据

Question

我正在使用具有 NGRX 效果的 Angular，我是可观察对象世界的新手。我想检查我的商店中是否存在数据，那么不应调用 API，并且应从商店中提取数据。我设法发现我可以使用 withLatestFrom() 来检查商店中的最新值。下一部分让我感到困惑，我无法让它工作。我当前的代码如下:

 @Effect() getSomeContent$ = this.actions$
    .ofType(GET_SOME_CONTENT)
    .withLatestFrom(this.store$.select('store-section'))
    .map(([action, store]) => {
        const content = {};
        if (store.someContent.length > 0) {
           return new GetCategoryContentSuccessAction({ categoryContent: categories });
        }
        return Observable.from(action.payload);
    })
    .switchMap(payload => this.APIcall(payload)
        .then(data => {
            const content = {};
            data.items.map((item) => {
                const slug = data.slug;
                content[slug] = {
                    info: datasomeData
                };
            });
            return new GetSomeContentSuccessAction({ categoryContent: categories });
        })
        .catch((err) => {
            return new GetFailureAction({ error: {} });
        })
    );

我想使用某种 if 或 else 语句来检查商店。如果数据存在，我想为我必须处理的 reducer 发送一个空对象。如果不是，我想调用 API 并将数据发回。我不知道可观察对象是否可以分支，换句话说，这样可以做到吗？

有没有更好的方法可以实现这一目标？可能通过创建另一个操作来单独处理 API。我想了解 future 的最佳实践。任何帮助将不胜感激。

Answer 1

我只是在研究这个问题的解决方案，所以我想我会把我的 2 美分放在这里，以防其他人发现它有帮助。

有一篇很棒的文章Stop Using NGRX Effects For That .其中谈到尝试将其塞入 ngrx 效果链中是多么复杂。

相反，他们推荐使用我一直在使用和喜爱的服务。一个简单的版本可能看起来像这样。

Service: 

public posts$ = this.store.select(postSelectors.selectAll)
    .pipe(
        tap(posts => {
            if (!posts.length) {
                this.store.dispatch(new postActions.LoadMany());
            }
        }),
        filter(posts => posts !== null)
    );

在这里，我们基本上只是尝试选择我们想要的状态片段，如果它不存在，则派发一个 Action ，该 Action 会触发一个效果，从 api 获取它并将其推送到商店中。

Component: 

this.posts$ = this.postService.posts$;

然后在您的组件中，您可以只订阅服务中的可观察对象，而不用关心它是否在商店中。然后，您可以在组件中订阅它以获取值，或者使用异步管道将其推送到模板。

这对于简单的东西非常有效，但我仍在研究更复杂的 RXJS 链，当您必须首先获取依赖于其他数据的数据时。但是，这只是我编写 RXJS 函数的能力的限制。