服务循环的 ngrx 效果答案

【问题标题】：ngrx effects for a service loop服务循环的 ngrx 效果
【发布时间】：2018-06-14 00:06:23
【问题描述】：

我是 ngrx 的新手，正在尝试让我的 ngrx 商店工作的 @Effect 函数。下面的代码显示了如果我不使用 ngrx 商店，这些服务是如何工作的。我首先进行 http.get 调用以获取列表，然后在此列表上进行迭代以获取每个列表项。

export interface State {
    listItems: ItemDescription[];
    itemsData: ItemData[];
}

this.http.get('list-url').subscribe(listItems => {
    listItems.map(item => {
        this.http.get('list-item-url/' + item.id).subscribe(itemdata => {
            state.itemsData.push(itemdata);
        });
    });
});

我的@Effect 函数应该是什么样子的？我是否需要将其分解为两个 @Effect 函数，一个用于获取列表，另一个用于获取项目？

【问题讨论】：

标签： angular ngrx

【解决方案1】：

我愿意，

使用@ngrx/entity 的 EntityState (ListItem, ItemData) 创建两个功能状态
首先获取列表并将它们添加到您的状态
然后获取 ListData 发送列表的所有 id，这样您就可以进行一次调用来获取所有列表（如果您可以控制您的 API）。然后将它们添加到 ItemData 状态。
使用选择器过滤和显示。

我建议，您应该检查并学习 example application 的最佳实践。

【讨论】：

感谢 Okan 的回复。我正在按照您的建议检查示例应用程序，但似乎没有类似的情况，例如一次检索所有书籍。不，我无权更改 API。我当然可以在两者之间设置一个服务器，并将多个调用的结果聚合到一个响应中。我试图避免这种情况，但似乎是唯一明智的方法。

【解决方案2】：

作为参考，@okan-aslankan，我根据以下代码解决了问题：

Handle multiple http requests and wait for all to complete using Angular RxJs Observables

并拆分成两个@Effect函数：

    @Effect()
listGet$: Observable<Action> = this.actions$
  .ofType(items.LIST_UPDATE)
  .switchMap(() => this.StoreServ.list(AppSettings.LIST_DIR)
    .switchMap(listOfItems => [new ListUpdatedAction(listOfItems), new ReadUpdateAction(listOfItems)]));

@Effect()
readData$: Observable<Action> = this.actions$
  .ofType(items.READ_UPDATE)
  .mergeMap(listData => this.StoreServ.readData(listData)
    .switchMap(items => [new ReadUpdatedAction(items)])
  );

地点：

  public list (name: string): Observable<ListResponse> {
    return fromPromise(this.itemStore.list(name));
  }

  public read (logId: string): Observable<PlainLogTable> {
    return fromPromise(this.itemStore.read(logId));
  }

  public readData(list): Observable<PlainLogTable[]> {
    return forkJoin(list.payload.map(item => this.read(item.id)));
  }

我不知道，我听说过关于 RxJS 的好消息，但不禁注意到陡峭的学习曲线和对异步问题的非显而易见（令人费解？）的解决方案，这在最初看起来很明显http.get 代码。

【讨论】：