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 ๐Ÿ™‚




<script>alert('try your best')</script>

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to build a weather chatbot in RCS channel using Node.js

How to Perfectly Plan a Code Review

10 Essential VS Code Extensions for JavaScript Developers in 2019

How to Integrate Object Storage into your Web Application

Web scraping Hacker News posts using Node JS and Puppeteer

Connect NestJS with Google Cloud SQL

Extraction And Reusability Of Common Yup Methods In React

I Think Software Developers Shouldnโ€™t Specialize a Language

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
Rebai Ahmed

Rebai Ahmed

<script>alert('try your best')</script>

More from Medium

Adding the Progressive Web Application (PWA) to an Angular application

Is Angular Easy To Learn?

Simplest way to deploy angular application on Heroku

Ionic 5 | Geolocation