angular - 別のObservableサービス呼び出しの結果でObservableサービス呼び出しを呼び出すAngular 2 ngrx/store

Question

Rxjs と ngrx/store を学び、理解しようとしています。

2 つの API 呼び出しがあり、最初の呼び出しでキャラクター名の配列を取得し、2 つ目の呼び出しでキャラクターのインベントリを取得します。

ngrx/store action/reducers/effects を使用して、最初の関数によって返された配列を介して 2 番目の関数を実行するにはどうすればよいですか?

これはサービス機能です:

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