RxJs Tutorial Series: Part 1 – Intro
First of all, I welcome you to this rxjs tutorial series for beginners 🙂Â
I hope this will help you understand the power of RxJs and will increase your curiosity about learning RxJs.
Actually, before we get into the concepts of RxJs, I just want to share a few solutions using rxjs for some realtime problems, that will help you understand the capability of RxJs.
Lets Begin
Let’s see this problem in action.
I hope you understand the problem now. In order to search the country India, the key up event has been raised 6 times, If the user mistypes and correcting it, then think how many API requests would have gone.
At least we must handle the below cases, right!
- Throttle key ups to reduce the number of API requests.
- Handle race conditions with the HTTP response.
Let’s solve this with RxJs
In the above example, we are controlling the keyup event streams and logging to console only if the user stopped typing (or) there is a pause during keystrokes for 300 ms.Â
And this can be done only with 5 lines of code,  that’s the beauty of rxjs.
Let’s take this to the next level and integrate API request.
In the above example, we actually make an API request to fetch the countries. You would have noticed, there are a couple of requests that are automatically being canceled. This the power of an RxJs operator which handles the race condition and cancels the ongoing API request when there is a need for a new one.
Just to summarize the cases that we have handled, so far.
- Handled the invocation of API requests only when there is a pause on keystrokes for 300 ms.
- Avoided the race condition in API response by cancelling the previous request before triggering the new one.
This awesome isn’t it!… Thanks to Rxjs 🙂
Tag:rxjs, scheduler, task maager, task scheduler
