如何有条件地从ngrx中的效果调度多个动作答案

【问题标题】：How to dispatch multiple actions from an effect in ngrx conditionally如何有条件地从ngrx中的效果调度多个动作
【发布时间】：2023-03-17 19:51:02
【问题描述】：

我是一名后端开发人员，从我正在从事的项目的前端开发开始。前端使用 Angular7 和 NgRx。在过去的 4 天里，我学习了很多东西，但我遇到了一些问题，希望能得到您的帮助。

我了解到我们可以通过返回一个具有多个动作的 Observable 数组来从 NgRx 中的一个效果中分派多个动作。我想根据条件调度数组中的一个动作。

我的代码看起来像这样

@Effect()
  something$: Observable<Action> = this.actions$.pipe(
    ofType(ActionType),
    switchMap.(action: any) => {
       return service.call(action.payload)
         .pipe(
             switchMap((data: ReturnType) => [ 
                new Action1(),
                new Action2(),
              ]),
        catchError(error handling)
      );
    }),
   );

我想实现这样的目标

   @Effect()
  something$: Observable<Action> = this.actions$.pipe(
    ofType(ActionType),
    switchMap.(action: any) => {
       return service.call(action.payload)
         .pipe(
             switchMap((data: ReturnType) => [ 
                 if(condition)
                   new Action1()
                  else
                    new Action1.1() ,
                new Action2(),
              ]),
        catchError(error handling)
      );
    }),
   );

我认为这是我对 RxJs 的了解不足，这阻碍了我实施条件。

【问题讨论】：

如果您是 Angular 新手，将 ngrx 添加到组合中是一个糟糕的主意。使用精心设计的 Angular 服务让事情变得简单。
这应该可以工作：[condition ? new Action() : new AnotherAction(), new Action2()]。不过要小心，调度多个操作可能并不总是最好的解决方案：stackoverflow.com/questions/42488283/…

标签： rxjs ngrx ngrx-effects rxjs-pipeable-operators rxjs-observables

【解决方案1】：

您可以通过让条件 if 确定要返回的可迭代对象来调度多个操作或特定操作

  @Effect()
  something$: Observable<Action> = this.actions$.pipe(
    ofType(ActionType),
    switchMap(action: any) => {
       return service.call(action.payload)
         .pipe(
             switchMap((data: ReturnType) => {
                 let actionsToDispatch = [];
                 if(condition) {
                   actionsToDispatch.push(new SomeAction())
                 } else {
                   actionsToDispatch.push(new SomeOtherAction())
                 }
                 return actionsToDispatch
              }),
              catchError(error handling)
      );
    }),
   );

【讨论】：

【解决方案2】：

要分派多个动作，您可以传递动作数组，如下所示：

@Effect()
getTodos$ = this.actions$.ofType(todoActions.LOAD_TODOS).pipe(
  switchMap(() => {
    return this.todoService
      .getTodos()
      .pipe(
        switchMap(todos => [
          new todoActions.LoadTodosSuccess(todos),
          new todoActions.ShowAnimation()
        ]),
        catchError(error => of(new todoActions.LoadTodosFail(error)))
      );
  })
);

要有条件地调度动作，您可以将动作包装在 if/else 中，如下所示：

@Effect()
getTodos$ = this.actions$.ofType(todoActions.LOAD_TODOS).pipe(
  switchMap(() => {
    return this.todoService
      .getTodos()
      .pipe(
        switchMap(todos => {
         if(true) {
             return new todoActions.LoadTodosSuccess(todos),
         } else {
            return new todoActions.ShowAnimation()
         }),
        catchError(error => of(new todoActions.LoadTodosFail(error)))
      );
  })
);

希望有帮助！

【讨论】：