javascript - 如何在 ngrx/effect (redux-observable) 中分派(dispatch)多个 Action ？

Question

我正在使用 Angular 6，ngrx/store。我有负责更新东西的效果。取决于我想分派(dispatch)不同 Action 的一些逻辑。如果我使用 switchMap 而不是 map 有什么区别？

这是我尝试过的方法，但它不起作用:

 @Effect()
  dispathMultipleActions$ = this.actions$.pipe(
    ofType(ActionTypes.UpdateSomething),
    map(() => {
      const actions: Action[] = [];
      const array = [1, 2, 3, 4, 5];
      array.forEach(item => {
        if (item > 3) {
          actions.push(new DeleteAction(item));
        } else {
          actions.push(new ChangeAction(item));
        }
      });
      return actions;
    })
  );

Answer 1

效果转换 Action 流，因此您有 Action 流作为输入和输出。在您的示例中，您将一个操作映射到一个操作数组。操作数组流不是有效的输出类型。您需要展平该数组，这意味着您不会将数组本身发射到输出流中，而是将其每个元素发射到输出流中。

代替:

input:  --a-------a------>
output: --[b,c]---[b,c]-->

你应该这样做:

input:  --a-------a------>
output: --b-c-----b-c-->

为了将数组的 Observable 扁平化为每个元素的 Observable，您可以使用操作符之一 mergeMap、switchMap、exhaustMap。在大多数情况下，mergeMap 将是正确的选择。如果您想了解有关这些运算符的更多信息，请查看此 answer .

@Effect()
register$: Observable<Action> = this.actions$.pipe(
  ofType(AuthActionTypes.REGISTER_REQUEST),
  mergeMap((action: RegisterRequest) => {
    // check for register request success
    return [
      new RegisterSuccess(),
      new LoginRequest(action.payload)
    ]
  })
);