Question

在调用服务以获取数据而不注入存储之前，我需要在效果内分派/触发另一个与ui相关的操作

我设法通过在构造函数中注入商店来修复它，并在调用获取数据的服务之前{this.store.dispatch(UIActions.startLoading()调度此额外的操作，但是我不确定是否在实际上注入商店是个好习惯

recipes$ = createEffect(() => this.actions$.pipe(
        ofType(RecipeActions.FETCH_RECIPES),
        switchMap(() => this.recipeService.getRecipes().pipe(
            switchMap(recipes => [
                RecipeActions.setRecipes({ recipes }),
                UIActions.stopLoading()
            ]),
            catchError(() => EMPTY)
        ))
    ));

我想知道是否有一种方法可以像使用 tap(() => of(UIActions.startLoading()))位于第一个switchMap

内

Answer 1

您正确使用tap运算符来实现所需的功能。

但是，您需要执行store.dispatch而不是简单地返回可观察到的of。另外，您可以使用switchMap观察值来返回from的数组，而不是多个actions。

recipes$ = createEffect(() => this.actions$.pipe(
        ofType(RecipeActions.FETCH_RECIPES),
        tap(()=> this.store.dispatch(UIActions.startLoading())),
        switchMap(() => this.recipeService.getRecipes().pipe(
            map(recipes => from([
                RecipeActions.setRecipes({ recipes }),
                UIActions.stopLoading()
            ]),
            catchError(() => EMPTY)
        ))
    ));

在返回语句之前有效的调度动作

1 个答案: