RXJS operators with use cases… Continued
My last article described some basic RXJS operators along with use cases. It is time to look at a few more in this article. This article will mainly focus on higher-order observables. A higher-order Observable is an Observable that emits other Observables.
Without much adieu, lets dive in
Here is the list of operators I am going to talk about in my post.
- mergeMap
- switchMap
- concatMap
To explain all these operators, we can assume a very common use-case. Consider that your app has a dropdown with 10 items in the list. For each selection on the dropdown, you need to make an API call to fetch data related to the selection. If we think of this problem in RXJS terms, the dropdown selection is observable A, and the API call that needs to be made on selection of the item in the dropdown is Observable B. Each operator mentioned in the above list can be used here, but we will be able to explore the intricate differences between them.
mergeMap: This operator processes each inner Observable in parallel. It merges the results of the inner Observables as they complete. So if we take the above example, if the user selects two different items in the dropdown, each inner API request will be executed in parallel. The output would be a merged observable of both the requests, but there is no guarantee that the order will be maintained. Hence, if we need to show the data for the current selection, and if there are multiple requests with different response times, there could be a possibility that the data shown is not matching the current selection.
There can be a use case where you just want to load data for different selections and show data only when you have data available to all the selections. Here, mergeMap would be a great fit as it will trigger parallel requests for each selection.
const obs1$ = of[1, 2, 3];obs1$.pipe(mergeMap(res => {
return this.httpClient.get(`<url>&productId=res`)})).subscribe(res =>
console.log(res)); // all responses merged but order not maintained// Here, each emission of outer observable [1, 2, 3] will trigger a // GET API call for each emission and the output would be merged but // no guarantee of order
switchMap: This operator is one of the most used operators, but not everybody understands it correctly. The switchMap operator unsubscribes from prior inner observables and switches to any new inner observable.
Again, looking at the common example above, if the user changes the dropdown selection and there are any previous API requests for the previous selections, those will get unsubscribed and the newest one will be subscribed. If you open your browser console->Network tab and try the selection, you would be able to see that if there are any previous requests, those will get cancelled.
const obs1$ = of[1, 2, 3];obs1$.pipe(switchMap(res => {
return this.httpClient.get(`<url>&productId=res`)})).subscribe(res =>
console.log(res)); // You will get response of the newest emission 3// Here, each emission of outer observable [1, 2, 3] will trigger a // GET API call but only the latest emission will be emitted and all // previous will be cancelled
concatMap: This operator waits for each inner Observable to complete before processing the next one. It concatenates the results of the inner Observables in sequence. The main advantage of concatMap is that order is maintained. The possible use case for this is when you require to perform some operations that need to be executed in a particular order.
const obs1$ = of[1, 2, 3];obs1$.pipe(mergeMap(res => {
return this.httpClient.get(`<url>&productId=res`)})).subscribe(res =>
console.log(res)); // all responses merged but order maintained,// Here, each emission of outer observable [1, 2, 3] will trigger a // GET API call for each emission and the output would be merged in // order
There are interesting differences in the above higher-order observables. Hope that the use case I have used would help in understanding these operators better.
Keep learning and sharing something new everyday.