RXJS for developers – Part1

Hi,

In this section, we will be starting with new series on RxJs. But, before jumping to rxjs directly, let’s understand stream of values first. As we know from JS world everything is synchronous. Let’s say every click which we do in application, that will be stream of value which contains click event. Let’s prove this point with an example.

Here, I have just subscribed to this click event listener and when I do click on the page. I can see result is getting logged below in console. I have clicked on the app couple of times and as a result values get logged in console which we can see below. Having said that, let’s try to address this from RxJs perspective by first creating definition of the stream. Below, I have created an observable first then I have subscribed to it in order to use it.

An observable will only become stream if we subscribe to it. Also, by convention we generally suffix any observable with $ sign.

Once we subscribed that, we can receive those values via subscribe method like shown in example.

One point to note here, this is just one stream. We can create multiple streams of one observable like shown below.

let’s say, we want to have some delay before first value is getting started. we can use timer in that case like

Event Capture:-

Now, let’s say we would like to capture click stream using RxJs method. For that purpose we can use fromEvent() method as shown below in the example.

And this will produce below output.

Subscribe options:-

Now, let’s look at other overloaded options come with subscribe method.

As you can see in the click stream observable, we can have error handler and completed action. In either case, streams won’t happen further.

Un-subscription:-

Let’s say observables are emitting value and after sometime, you want to unsubscribe the same. For that, we can use subscription object and then unsubscribe after sometime like shown below in the snippet.

Having said that, this will produce the following output.

With this, I would like to wrap this first session. In the next session, we will delve further into the details of rxjs operators and will understand when to use them. Till then stay tuned and Happy Coding.

Thanks,
Rahul Sahay
Happy Coding

718 total views, 4 views today