MergeMap operator

[00:00 - 01:00] So, the merge map operator. Unlike switch map, merge map does not have built-in cancellation, and also does not preserve the order of emissions. This makes it suitable for scenarios where the order of the responses does not matter, and handling multiple observables in parallel becomes possible. This is handy in scenarios where you want to trigger multiple independent APIs at the same time, or you want to process the API responses as soon as they arrive. This is how I like to visualize the call chain of merge map. So, let's draw the timeline again, and let's say we are making three calls at the same time, or more or less at the same time. So, now imagine one of the calls takes much longer than the others. This one starts here, and this one starts later and finishes right about here. Let's say this is our first, second, and third call in that sequence. So, this way, when the first API call finishes, we start processing its response right about here. The same goes for the second one and the third one. Now, let's say the second API call takes much longer time.

[01:01 - 02:09] So, it started before the third one and finishes after the third one. Then, we will process it in this place. One of my favorite use cases is multiple file uploads. When we are dealing with multiple file uploads, oftentimes we don't really care when the first file of ends uploading and the second one starts and ends. We only care that the whole job is done. This way, we can show the user that all the files are being uploaded in parallel and maybe add the check box per file, so the user knows when each file has finished uploading. Another use case that I can think of is if you want to do multiple actions at the same time. For example, let's say a user clicks a button, you want to gather some analytics at the same time you want to do an API call to the back end, and at the same time you want to show a notification telling the user that the button has been clicked. Now, let's jump back to the code and see merge map in action. The first thing that I want to do is in our fetch products, I want to add the custom delay, and this delay is going to simulate our backend response time. Let's add a delay of about something between 0 and 5 seconds. Now, in our app component, let's switch the switch map with the merge map operator.

[02:10 - 03:30] And the last thing that I want to do, I want to use the tap operator to do some console logging. For those of you who are not familiar with the tap operator, the tap operator is used for side effects that don't change the state of the value. The way I like to think about the tap operator is like a surveillance camera in a shopping center. The camera is watching all the customers, it records what the customers do, but it does not intervene with the customers. If you really want to change the state of the value, you should probably use another operator such as map. In our case, value is actually an array of products. And for what I'm going to show you, I only want to show you the first value. In our overview, what I'm going to do is just toggle between these two values. And in the networking tab, you will see that first of all, the requests are not being canceled. Let me put that as well. And let me toggle a few times. As you can see, on the right side in the networking tab, the requests are not being canceled. And they're also being processed as soon as we get a response, because we're not using a real backend, every call that we do to our products.json, we get the whole list back and afterwards, we are filtering it. It's not that handy to demonstrate it in the networking tab. That's why I added the console log statement. So we can see that some of the requests, like for example, 36, 36, 36, they are executed out of order, which is our intention here.

[03:31 - 04:08] But in the case of filtering something, of course, we do not want to do this out of order. So be mindful when picking one of the higher order observables, please think about the intent, because otherwise you will get with some nasty issues that sometimes might be really hard to debug. To summarize everything, the merge map operator has built in parallelism. It does not have cancellation, and it's really handy in scenarios where we don't care about the order, we want to do everything at the same time, such as uploading multiple files or executing or triggering multiple actions at the the same time. In the next lesson we will look at the concat map.