Higher Order Observables, SwitchMap operator

[00:00 - 00:06] This is probably my favorite part of this course. This is where RxJS really starts to shine and where things get really interesting.

[00:07 - 00:16] Where we stop just reacting to data and start composing and orchestrating streams in a much more dynamic and expressive way. Basically, this is where magic happens.

[00:17 - 00:23] And now we're going to break it down and learn how to use that magic with intention. And this last now I want to introduce you to higher order observables.

[00:24 - 00:36] Higher order observables are observables whose returned values or themselves observables. This means that instead of emitting simple values like number or strings, a higher order observable emits entire observables.

[00:37 - 00:42] There are four types of higher order observables. Switch map, merge map, concat map, and exhaust map.

[00:43 - 00:58] As you've probably noticed, those four are map operators. The difference with a simple map is, while map just takes a value, transforms it, let's multiply it by two, and then we get a new value y, while the higher order observable map.

[00:59 - 01:09] Let's call it H map. Also takes a value, transforms it, but instead of returning a new value, it will return a new observable containing that value y.

[01:10 - 01:17] The next thing that you need to remember is, these four higher order observables are operators. That means that we can use it inside the pipe function.

[01:18 - 01:23] Let's begin with the first one. What's special about it is that it has built-in cancellation functionality.

[01:24 - 01:36] Now, in order to understand how it works precisely, let's go back to the code and see it in action. Inside our app.compound.html, let's comment this part, and uncomment this part, we will work with this products observable in here.

[01:37 - 01:53] Now, if you go to our app.compound.ts, I see a few warnings. It's complaining about the usage of the async pipe, but if we have a closer look at our app.compound.html, we can see that we are actually using this async pipe, which means that we just need to restart the Angular language service.

[01:54 - 02:01] To do that, Control Shift P, let's search for "Restart" and in here, just select the option to restart the server. We're done.

[02:02 - 02:08] We still have a warning about the router outlet, and this is actually a valid warning because we are not using the router at this time. Let's remove it.

[02:09 - 02:11] Save. Let's go back to our ngOnInit method.

[02:12 - 02:21] Let's remove this merge operator. Let's comment this pagination functionality, and for demonstration purposes, for now, I'll only focus on the filtering observable.

[02:22 - 02:28] What we need to do is remove this subscribe from here. Then let's re-assign this products observable to this filter term observable.

[02:29 - 02:33] Of course, it is complaining because we're not done yet. It is expecting an array.

[02:34 - 02:38] Now, let's use our switch map operator. Switch map expects a value.

[02:39 - 02:47] Then, as I mentioned before, we have to return an observable. For now, I will use the "off" operator to create an empty observable that will return an array.

[02:48 - 02:52] Let's format. Okay, so what's happening is we are using here the switch map operator which gets a value.

[02:53 - 02:59] If you look closely at the filter term observable, it returns a string. So our value is also a string, as you can see it in here.

[03:00 - 03:08] With that string, we can call our product service, fetch products method, and pass it to the fetch products function. It is expecting a page number as well.

[03:09 - 03:14] For now, let's just give it page number one. Now that we're all set up, let's go into the browser and see how to works behind the scenes.

[03:15 - 03:21] This is where the fun begins. First, I want to simulate the slow internet connection, so I'll change this to 3G.

[03:22 - 03:24] Now, let's type something in. We see that request is pending.

[03:25 - 03:38] Now, if I remove it and then type something back in, I need to be faster, of course. As you can see, whenever there is a new value, the previous request gets cancelled.

[03:39 - 04:06] This is handy if you have, let's say, a slow server and you want to limit the amount of requests that are being sent to the server or from a user experience, the user only cares about the latest result in the search query, so he's not interesting in those three that have been cancelled, but only in the last one. Some common use cases of the switch map operator is the type ahead functionality when you are typing something in an input, then you get to drop down with suggestion that you can select.

[04:07 - 04:13] Another common use case is data fetching during route navigation. Let's say like we have a list, like in here.

[04:14 - 04:26] And whenever a user clicks on an item, somewhere on the right side, the item data gets loaded based on the parameter, which is the item ID. So if the user clicks really fast, we don't want to send multiple requests to the server.

[04:27 - 04:36] The user is only interested in the last request. If we were to visualize a stream of data as a timeline, when the first request starts, it will start executing.

[04:37 - 04:42] And when the second request starts, the previous request will be cancelled. And the second one will execute.

[04:43 - 04:59] If we view the whole timeline, this time we'll get the result of the second request that will be further processed. To summarize what we've done so far is we have looked at higher order observables, we have concluded that these are just operators that have observables as return values.

[05:00 - 05:12] We have established that there are four higher order observables, and we have gone through the first one, which has a unique functionality that is built in cancellation. In the next lesson we will look at the merge map operator.