Ngrx 在项目的多个操作中拆分项目的操作

Question

我正在尝试制作一个从多个用户加载帖子的 Ngrx 效果。我已经有了加载一个用户的帖子的工作效果。如何将 LoadUsersPosts 效果拆分为多个 LoadUserPosts 效果？

这就是我现在正在尝试的。

 @Effect() loadUsersPosts$ = this.actions$
.ofType(LOAD_USERS_POSTS)
.mergeMap((action: LoadUsersPosts) => {
  const array = [];
  action.payload.forEach(user => {
    array.push(new LoadPosts(user));
  });
  return array;
});

我已经在 forEach 中放置了一些 console.log，但它似乎并没有被执行。

Answer 1

听起来您想要执行的基本任务是转换并单独发出可观察流中数组中的值。尽管 map 比 forEach 更简单，但您可以像现在一样进行转换。然后，您只需使用 from 从结果数组创建一个可观察对象，该数组将按顺序发出每个值。这是一个简化的运行示例：

Rx.Observable.of([1,2,3,4,5])
  .mergeMap(x => {
    const transformed = x.map(y => y * 2);
    return Rx.Observable.from(transformed);
  })
  .subscribe(x => { console.log(x); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.10/Rx.min.js"></script>

Answer 2

这可以通过以下代码实现

@Effect()
  loadUsersPosts$ = this.actions$
    .ofType(LOAD_USERS_POSTS)
    .pipe(
      switchMap((action: LoadUsersPosts) => from(action.payload)),
      map(user => new LoadPosts(user))
    );

此处 switchMap 运算符将使用 "from" Observable creator

基于 "action.payload" 数组将外部 observable 转换为多个内部 observable

"from" Observable creator 将通过一次发出一个值从数组创建 observable 流

地图运算符会将其转换为动作

switchMap 运算符优于 mergeMap。 mergeMap 将为所有请求提供输出，而 switchMap 将取消除最新请求之外的所有请求

Ngrx 在项目的多个操作中拆分项目的操作

Ngrx split action of items in multiple actions of item

angular

typescript

ngrx

ngrx-effects