Question

我是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函数，一个用于获取列表，另一个用于获取项目？

Answer 1

我愿意，

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

我建议您应该检查并了解example application中的最佳做法。

Answer 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。获取代码。

ngrx对服务循环的影响

2 个答案: