NgRx的Effect中如何按顺序派发两个Action实现删除后刷新电影列表

你当前写法的问题出在RxJS操作符的使用逻辑上：连续使用两个map操作符会覆盖前一次的转换结果，第一个map生成的deleteMovieSuccess action会被第二个map直接替换为getMovies action，最终Effect只会派发最后输出的getMovies，这就是你看不到deleteMovieSuccess执行日志的原因。

NgRx的Effect本身支持派发多个Action，你只需要将删除请求成功后的流调整为依次发射两个Action即可，不需要拆分多个Effect，修改后的代码如下：

deleteMovie$ = createEffect(() => this.actions$.pipe(
  ofType(MovieActions.deleteMovie),
  mergeMap(({movieToDelete, search, page, limit}) =>
    this.moviesService.deleteMovie(movieToDelete)
    .pipe(
      // 用mergeMap返回包含两个Action的数组，元素会按顺序逐个发射
      mergeMap(() => [
        MovieActions.deleteMovieSuccess({movieToDelete}),
        MovieActions.getMovies({search, page, limit})
      ]),
      catchError(() => EMPTY)
    )
  )
));

• 两个Action会严格按照数组顺序派发：先执行deleteMovieSuccess，再执行getMovies，完全匹配你的业务执行顺序要求
• 这里用mergeMap或者concatMap都可以，当前场景下没有并发请求冲突，二者效果一致
• 不需要修改现有Action定义，也不需要新增额外的Effect监听逻辑

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