How to pass results between chained observables

by

You certainly shouldn’t have your methods take in params that don’t concern them!

To your main question:

How to pass results between chained observables without the problems i’ve mentioned?

Use a single scope (nested pipes)

The code below is equivalent to your sample code, with no need to pass the unnecessary properties. The previously returned values are accessible by function calls further down the chain:

1   startUploadEvent$.pipe(
2     concatMap(event => getAuthenticationHeaders(event).pipe(
3       map(headers => generateUploadId(event, headers).pipe(
4         tap(id => emitUploadStartEvent(id, event)),
5         concatMap(id => createPdfDocument(event, headers, id)),
6         concatMap(pdfId => uploadBilderForPdf(event, pdfId)),
7         tap(cloudId => closePdf(cloudId, event))
8       ))
9     ))
10  ).subscribe();

Notice how event and headers are accessible downstream. They do not need to be passed into functions that don’t require them.

Is there a rxjs concept i’ve missed?

Maybe.? Not really… 🙂

The trick is to tack on a .pipe to effectively group operators so they all have access to the input params.

Usually, we try to keep the code flat inside the .pipe:

1   const greeting$ = userId$.pipe(
2     switchMap(id => http.get(`/users/${id}`)),
3     map(response => response.data.userName),
4     map(name => `Hello ${name}!`),
5     tap(greeting => console.log(greeting))
6   );

but that code is really no different than:

1   const greeting$ = userId$.pipe(
2     switchMap(id => http.get(`/users/${id}`).pipe(
3       map(response => response.data.userName),
4       map(name => `Hello ${name}! (aka User #${id})`)
5     )),
6     tap(greeting => console.log(greeting))
7   );

But, in the second case, line #4 has access to the name and the id, whereas in the first case it only has access to name.

Notice the signature of the first is userId$.pipe(switchMap(), map(), map(), tap())

The second is: userId$.pipe(switchMap(), tap()).

More Related Contents:

  1. What is the difference between Subject and BehaviorSubject?
  2. How to cancel/unsubscribe all pending HTTP requests in Angular 4+
  3. How to make a sequence of http requests in Angular 6 using RxJS
  4. Angular subscribe elegant
  5. Best way to import Observable from rxjs
  6. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  7. Behaviour subject initial value null?
  8. rxjs/Subject.d.ts error : Class ‘Subject’ incorrectly extends base class ‘Observable’
  9. Rxjs Retry with Delay function
  10. Subscribing to a nested Observable
  11. What is pipe for in RxJS?
  12. How to throw error from RxJS map operator (angular)
  13. How to return observable from subscribe
  14. Property ‘toPromise’ does not exist on type ‘Observable’
  15. How to return value inside subscribe Angular 4
  16. Do I need to `complete()` takeUntil Subject inside ngOnDestroy?
  17. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  18. Angular 2 beta.17: Property ‘map’ does not exist on type ‘Observable’
  19. Ionic 2 Form goes up when keyboard shows
  20. RxJS: takeUntil() Angular component’s ngOnDestroy()
  21. Angular Subscribe within Subscribe
  22. Reactive forms – disabled attribute
  23. How to implement sleep function in TypeScript?
  24. Testing error case with observables in services
  25. Build Angular2 HTML and TypeScript to a single file
  26. angular keyvalue pipe sort properties / iterate in order
  27. Angular – Make multiple HTTP calls sequentially
  28. @types/googlemaps/index.d.ts’ is not a module
  29. Angular 4+ using Google Analytics
  30. How to receive blob responses using Angular’s 2+ @angular/http module?

Leave a Comment