Performing multiple API calls before dispatching an Action an NgRx Effect

Question

I'm using NgRx @Effect and for some effect I need to perform 2 API calls: the result of the first one is used in the second one and the I want to dispatch an Action with the 2nd API call as payload this way :

@Effect()
FetchDetails() {
  return this.actions.pipe(
    ofType(actions.SOME_ACTION),
    switchMap((action: SomeAction) => this.myService.getContext()),
    switchMap((ctx: Context) => this.myService.fetchDetails(action.id, ctx.requesterType)
      .pipe(
        map((response: Details) => new SetDetails(response)),
        catchError(err => {return of(new SetFetchDetailsError(err))})
      )
  )
}

Using a double switchMap like this I can't access action.id so I think my operators orchestration is not correct !

Answer 1

Just do this in pipe inside:

@Effect()
FetchDetails() {
  return this.actions.pipe(
    ofType(actions.SOME_ACTION),
    switchMap((action: SomeAction) => this.myService.getContext().pipe(
      switchMap((ctx: Context) => this.myService.fetchDetails(action.id, ctx.requesterType)
    ))
      .pipe(
        map((response: Details) => new SetDetails(response)),
        catchError(err => {return of(new SetFetchDetailsError(err))})
      )
  )
}