Understand Reactive Programming using RxJS

Use an event stream of double clicks in RxJS 

Reactive Programming - Why choose RxJS?

Use RxJS Async Requests and Responses

Render on the DOM with RxJS

Send new requests from refresh clicks in RxJS

Clear data while loading with RxJS startWith

Share Network Requests with RxJS merge

Use cached network data with RxJS

An overview of RxJS reactive concepts

Introduction to Reactive Programming Using RxJS 5

This lesson teaches how to control whether network requests are cached or are pessimistically re-executed, with the help of the RxJS merge operator. 

[00:00] We just built this user interface such that when we click refresh it seems to do the following. It does one network request, and then with the JSON response it selects three random users.

[00:13] But in reality, that's not what happens. Actually, there are three network requests, one for each user. Now, that might sound strange, and if you don't believe me, we can check here.

[00:28] We can write a console log where we are creating a promise for the network request. We can just put, do network request as message. If we see the console and we rerun this, then we're going to see three network requests.

[00:49] Now, this might sound strange, but there's a logical explanation to this. If you notice responseStream is used three times, once for each of these suggestion streams. These are being subscribed. So in a way, there are three subscribers to the responseStream. It's an indirect subscription, but things work as a chain.

[01:15] If you subscribe to suggestion one stream, it will subscribe to the responseStream, which will subscribe to the requestStream and so forth. That's why, in the chain, we are are subscribing to responseStream three times.

[01:30] Now, observables works like videos, actually. If you have on your phone one YouTube video, then you are doing one network request for that video. And if your friend has his phone and he's watching the same video, he will do also the same network request for that video.

[01:53] It works in the same way. You can think of a stream as a video and subscribing as watching. So, all the related side effects will happen separately.

[02:03] The question is, if we want to really have just one network request, how do we do that? Well, just like in real life, you can have one screen with one video and two people watching that. You can also do this with  observables. You can say, this will be a shared observable.

[02:23] Now, this means that there is internally here one subscribe. So, this share it and replay will make it's automatic subscribe. Whoever subscribes later to this responseStream, all kinds of multiple subscribers will share the same inner subscription that this share replay has.

[02:46] Why replay one? Well, that's because if there happens to be a really late subscriber...let's say someone does a setTimeout and doesn't subscribe to the responseStream after a long while. Let's say, three seconds or even 10 seconds. Then, this subscribe will get a replayed response JSON. It will not do a new network request, but it will simply replay that same JSON that happened before.

[03:24] That was the share replay. We can be confident that this console log will be shown only once.

Course

Introduction to Reactive Programming Using RxJS 5

Share Network Requests with RxJS merge

Share this video with your friends