Rxjs Heaven (Part3: Higher-order operators )

Introduction 🚩 :

Hello Dear Readers

Making everything reactively is a trend in web development currently with the most famous JS frameworks not only with Angular! so I decided to start a series of blogs about Rxjs 🔥 (A reactive programming library) and cover the most use cases with code examples to help you clearly understand why I called Rxjs a Heaven ☀️

This series of blogs will contain :

  • Part1: Error Handling With Rxjs (Published )
  • Part2: Multi-Casting Operators with Rxjs (Published )
  • Part3: Higher-order operators with Rxjs ( Current blog )
  • Part4: Custom operators with Rxjs ( coming soon ⏳)

Each part will contain an explanation for the operators, code _examples, and the most use cases for each one

Happy reading :)

Higher-order operators:

There are a lot of important operators in reactive programming, one of them are higher-order mapping operators: switchMap, mergeMap, concatMap, and exhaustMap which they are the most used operators with Rxjs ,

And they are the most difficult operators to understand.

And that’s the goal of this blog , trying to explain them with example code and code explanation

Definition ☑️ :

A higher-order Observable is an Observable that emits other Observables

Advantage ✔️ :

They are used to avoid the nested subscription anti-pattern

(A) concatMap Operator 📖:

concatMap is a combination of two operators concat and map that can be used to run Observables in sequence.

Code-Example 📘:

Code-Explanation 📘:

In this code example, we tried to make a sequence of API calls by using concatMap Operator

  • for: operator used to iterate the array values will be emitted as a sequence!
  • ajax: It creates an observable for an Ajax request
  • concatMap: will be used to run the observable list in sequence and wait for all these subscriptions to be finished to complete

Result Execution :

(B) The switchMap Operator 📖:

SwitchMap is an operator that can be used for Observable Switching :

subscribes to a new inner observable, it unsubscribes from the previous one.

source: https://yakovfain.com/2017/09/19/rxjs-essentials-part-6-the-switchmap-operator/

Usage :

With Route Parameters

Angular Forms ValueChanges event

This works perfectly for scenarios like typeaheads where you are no longer concerned with the response of the previous request when a new input arrives. This also is a safe option in situations

Code-Example 📘:

Code-Explanation 📘:

  • terms: Observable<string> :
  • debounceTime(400): this operator used to delay values emitted by the source Observable terms
  • distinctUntilChanged(): this operator used to emit value only when the new value is different from the current one
  • switchMap((term):
  • this.http.get(this.baseUrl + this.queryUrl + term): this code to mak an API call with httpClient provided by Angular

(C) mergeMap Operator 📖:

MergeMap is an operator that can be used to run sequentially observables

Code-Example 📘:

Code-Explanation 📘:

  • getPosts: a function to make an API call to get the list of posts
  • getCommentsWithPost: to get list of comments related to the post in params
  • tap((item) => console.log(‘yes !’, item)) : an operator used for side-effect to log each mapped item
  • mergeMap(this.getCommentsWithPost) : we will use the mergeMap operator to ..

References 📓 📕 :

Conclusion ❤️👏:

For Conclusion, we explored the Rxjs high order operators with some cod-examples and use cases

I hope it helps and you enjoyed it 😀

If you liked this post feel free to leave a 👏, and follow me on Twitter and Github

Thanks 🙂



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store