服务循环的ngrx效果

Question

I'm new to ngrx and trying to get the @Effect function for my ngrx store working. The code below shows how the services work if I wasn't using a ngrx store. I first make an http.get call to get a list, and then iterate on this list to get each list-item's.

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);
        });
    });
});

How is my @Effect function supposed to look like? Do I need to break this up into two @Effect functions, one to grab the list, another to get the items?

Answer 1

I would,

1. Create two feature state with @ngrx/entity's EntityState (ListItem, ItemData)
2. Fetch lists first and add them to your state
3. Then fetch ListData's sending all ids of lists so you can make single call to get all of them (If you can control your API). Then add them to ItemData state.
4. Use selectors to filter and display.

I suggest, you should check and learn best practices from example application .

Answer 2

For reference, @okan-aslankan, I solved the problem with the following code based on:

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

and split into two @Effect functions:

    @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)])
  );

where:

  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)));
  }

I don't know, I've heard good things about RxJS, but can't help but notice the steep learning curve and non-obvious (convoluted?) solution to an async problem which seems quite obvious w/ the initial http.get code.