Ngrx Effects中如何在createEffect函数内派发多个Action？

问题本质 #

createEffect完全支持派发多个Action，你代码运行报错的核心原因是：
你用map操作符返回Action数组后，当前流的类型为Observable<Action[]>，也就是单次发射一整个Action数组，而NgRx Effect默认要求流发射的内容为单个Action实例，类型不匹配触发了内部校验错误。

修复方案 #

任选以下一种方式修改即可：

方案1：将内层map替换为mergeMap #

mergeMap、concatMap、switchMap这类高阶映射操作符都会自动把数组转为逐个发射元素的Observable，直接匹配Effect的类型要求：

loadMovies$ = createEffect(() =>
  this.actions$.pipe(
    ofType('[Movies Page] Load Movies'),
    mergeMap(() =>
      this.moviesService.getAll().pipe(
        // 把原map替换为mergeMap
        mergeMap(movies => [
          { type: '[Movies API] Movies Loaded Success', payload: movies },
          { type: '[Movies API] Movies Loaded Success 2', payload: movies },
        ])
      )
    )
  )
);

方案2：保留map，追加concatAll操作符 #

concatAll操作符会把流中发射的数组拆开，将数组内的Action逐个向下游发射：

loadMovies$ = createEffect(() =>
  this.actions$.pipe(
    ofType('[Movies Page] Load Movies'),
    mergeMap(() =>
      this.moviesService.getAll().pipe(
        map(movies => [
          { type: '[Movies API] Movies Loaded Success', payload: movies },
          { type: '[Movies API] Movies Loaded Success 2', payload: movies },
        ]),
        // 追加concatAll展开数组
        concatAll()
      )
    )
  )
);

两种方案运行效果完全一致，修改后即可同时触发两个成功Action。 #

内容的提问来源于stack exchange，提问作者Andy88