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 📓 📕 :

• https://blog.angular-university.io/rxjs-higher-order-mapping/
• https://blogs.msmvps.com/deborahk/higher-order-observable/
• https://blog.richardmuscat.com/2020/06/01/rxjs-higher-order-observables.html
• https://indepth.dev/reference/rxjs/operators/concat-map
• https://rxjs.dev
• https://www.learnrxjs.io/
• https://netbasal.com/understanding-mergemap-and-switchmap-in-rxjs-13cf9c57c885

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 🙂