Comment enchaîner plusieurs appels .map() sur des éléments précédents en utilisant rxjs

Question

Dans l'exemple ci-dessous, je me demandais comment effectuer deux opérations sur la même réponse de la fonction .swichMap().

Dans l'exemple, j'ai inséré le deuxième .map, ce qui est manifestement erroné mais illustre bien ce que je veux faire. Comment dois-je faire pour appeler deux fonctions ? De plus, lorsque je décompose le premier map() en une fonction comme .map(response => {fn1 ; fn2;}) ; le script génère une erreur ?

@Effect()
    getUserCourse$: Observable<Action> = this.actions$
        .ofType(userCourse.ActionTypes.LOAD_USER_COURSE)
        .map<string>(action => action.payload)
        .switchMap(userCourseId => this.userCourseApi.getUserCourse(userCourseId))
        .map(response => new userCourse.LoadUserCourseSuccessAction(response.data));
        .map(response => new course.LoadCourseSuccessAction(response.course));

Answer 1

Pour cette réponse, je suppose que les deux fonctions userCourse.LoadUserCourseSuccessAction y course.LoadCourseSuccessAction retourne les Observables. Sinon, vous pouvez toujours en créer un avec Rx.Observable.of o Rx.Observable.fromPromise dans le cas par exemple d'un appel AJAX.

Si je comprends bien, vous voulez faire des choses indépendantes avec la réponse, mais les faire en parallèle et fusionner les résultats dans le flux. Jetez un œil au code suivant qui montre comment cela peut être archivé.

Rx.Observable.of(
  {data: 'Some data', course: 'course1'},
  {data: 'Some more data', course: 'course2'}
).mergeMap((obj) => {
  // These two streams are examples for async streams that require
  // some time to complete. They can be replaced by an async AJAX 
  // call to the backend.
  const data$ = Rx.Observable.timer(1000).map(() => obj.data);
  const course$ = Rx.Observable.timer(2000).map(() => obj.course);

  // This Observable emits a value as soon as both other Observables
  // have their value which is in this example after 2 seconds.
  return Rx.Observable.combineLatest(data$, course$, (data, course) => {
    // Combine the data and add an additinal `merged` property for
    // demo purposes.
    return { data, course, merged: true };
  });
})
.subscribe(x => console.log(x));

Démonstration exécutable