如何在 ngrx/effect (redux-observable) 中分派多个动作？

Question

我正在使用 Angular 6，ngrx/store。我有负责更新东西的效果。取决于我想分派不同动作的一些逻辑。如果我使用 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

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

而不是：

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

你应该做的：

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

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

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

Answer 2

我有过同样的情况（假设 NgRx 10 或更高），我有不同的观点，更基本的方法是如何使用效果。在一个地方连续触发多个动作，特别是在一个效果中，是反模式。从本质上讲，重要的是保持一致的 general flow of application state in NgRx 行动和潜力减少。正如 NgRx 架构所预见的那样。

关注 the 3 effect rules 将有助于避免困难情况：

将效果命名为效果的名称
让你的效果只做一件事
只发出一个动作

这样，它可以帮助您遵循 separation of concerns 设计模式，这当然也可以帮助您使 NgRx 效果变得更加可单元测试。

回到你的例子，你可以简单地将你想做的事情（2 个额外的动作）与中间代理动作分离。

在您的情况下，您似乎甚至不需要原始效果 dispathMultipleActions$，除非其中出现特殊逻辑。（也许，它可能属于状态 Reducer，它甚至更可单元测试）。

假设 ActionTypes.UpdateSomething 已经有一个数组负载对象，你可以将你的 dispathMultipleActions$ 拆分成一个，这样你就可以做这样的事情：

@Effect()
deleteAction$ = this.actions$.pipe(
    ofType(ActionTypes.UpdateSomething),
    concatMap(from(new Promise((array) => {
        array.forEach(item => {
            if (item > 3) {
                //do something
            }
        });
    }))),
    {dispatch: false}
);

@Effect()
changeAction$ = this.actions$.pipe(
    ofType(ActionTypes.UpdateSomething),
    concatMap(from(new Promise((array) => {
        array.forEach(item => {
            if (item <= 3) {
                //do something
            }
        });
    }))),
    {dispatch: false}
);

如何在 ngrx/effect (redux-observable) 中分派多个动作？

How to dispatch multiple actions in ngrx/effect (redux-observable)?

javascript

typescript

ngrx

angular

ngrx-store