角2 NGRX /存储调用另一个可观测服务呼叫

Question

我想学习和了解Rxjs和NGRX /存储

我有两个API调用的结果可观察到的服务调用，第一个得到我的字符名称阵列，第二个让我得到一个字符的库存。

如何使用ngrx/store action/redurs/effects通过第一个函数返回的数组运行第二个函数？

这是服务功能：

public getCharacterNames(): Observable<string[]> { 
    return this._http.get(this._url + '/characters?access_token=' + this._key) 
    .map((res: Response) => res.json()) 
    .catch((error: any) => Observable.throw(error.json().error || 'server error')); 
} 

public getCharactersInventory(characterName: string): Observable<Bag[]> { 
    return this._http.get(this._url + '/characters/' + encodeURI(characterName) + '/inventory?access_token=' + this._key) 
    .map((res: Response) => res.json()) 
    .catch((error: any) => {return Observable.throw(error.json().error || 'server error'); }); 
} 

这些动作：

public loadCharacters(): Action { 
    return { 
    type: Gw2Actions.LOAD_CHARACTERS 
    }; 
} 

public loadCharactersSuccess(characters: Character[]) { 
    return { 
    type: Gw2Actions.LOAD_CHARACTERS_SUCCESS, 
    payload: characters 
    }; 
} 

这是减速机：

case Gw2Actions.LOAD_CHARACTERS_SUCCESS: { 
    return action.payload; 
    } 

这是我尝试使用效果：

@Effect() private loadCharacters$: Observable<Action> = this._actions$ 
    .ofType(Gw2Actions.LOAD_CHARACTERS) 
    .map((action) => action.payload) 
    .switchMap(() => this._gw2Service.getCharacterNames()) 
    .map((characterNames) => { 
     let characters = []; 
     characterNames.forEach((characterName) => { 
     let characterBags = this._gw2Service.getCharactersInventory(characterName) 
      .subscribe((res) => res); 
     characters.push({ 
      name: characterName, 
      bags: characterBags 
     }); 
     }); 
     return characters; 
    } 
) 
    .map((characters: Character[]) => this._gw2Actions.loadCharactersSuccess(characters)); 

Answer 1

我建议分离Rxjs和ngstore的两个挑战。以下是从字符名称中解析库存的一种方法。希望你能够将它映射到你的ngstore效果。

let charNames$ = Rx.Observable.of([{name: 'a'}, {name: 'b'}, {name: 'c'}]); //mock names 
 
let getInventoryFromName = name => Rx.Observable.of({owner: name}).delay(1000); //mock inventory 
 

 
let result$ = charNames$.switchMap(names => Rx.Observable.forkJoin(names.map(n => getInventoryFromName(n.name)))); 
 

 
result$.subscribe(res => console.log('got some inventory/user pairs: ', res));

<script src="https://unpkg.com/rxjs/bundles/Rx.min.js"></script>