如何有条件地从 ngrx 中的一个效果中分派多个动作

Question

我是一名后端开发人员，从我正在从事的项目的前端开发开始。前端使用 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 缺乏了解，这阻碍了我实现条件。

Answer 1

您可以通过让条件 if 确定可迭代的内容来分派多个操作或特定操作 return

我推荐你阅读：https://www.learnrxjs.io/operators/transformation/switchmap.html

  @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)
      );
    }),
   );

Answer 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)))
      );
  })
);

希望对您有所帮助！

如何有条件地从 ngrx 中的一个效果中分派多个动作

How to dispatch multiple actions from an effect in ngrx conditionally

rxjs

ngrx

ngrx-effects

rxjs-pipeable-operators

rxjs-observables