RxJS Mapping Operators

[00:00:00]
>> Alex Okrushko: So then we can do the operator that can control this race conditions. We'll start with the merge map operator. So, and the reason we start with merge map. We have 4 operators: merge map, concat map, exhaust map, and switch map. So those 4 operators are all handling race conditions differently. Yes, so let's take a look at the first one.

[00:00:38]
So, say, the merge map, we have an event coming in, our button click. And then when we have this event, we'll say that this console log. Console log. We can say, hey, this transaction started, so we're starting some transaction. And this is before we do anything. And think of it as here, this is where we're going to do the API call.

[00:01:10]
This is our API call which doesn't return immediately, it's asynchronous. This is our API call. So what I'm going to do is pretend we have an API call. So I'll have the of which just creates another observable that's of a single value and you can say transaction complete here. Complete, but we're not going to return it immediately, we're also going to pipe it and we're going to delay that's one of the operators.

[00:01:46]
I'm going to just delay this, so it's going to complete, going to give a result back, but it's going to complete 2 seconds later. So 2 seconds later, it's going to emit this, hey, I'm done. So this is the merge map. So, OK, cool, now we have this pipe, as I mentioned before, observables don't do anything until they're subscribed. So we're going to subscribe here as well.

[00:02:16]
I'm going to have some results, which basically would be this result, this is going to come through here so button and click is just void, right? There's no message here it transforms that value, which is nothing into another value that will be coming from here, which is just a transaction complete string single value that we deferred for 2 seconds.

[00:02:47]
And typically this is where you would call the endpoint, and you would get results from that endpoint that you want to return. So we're going to subscribe. And once we subscribe, and again, you can do subscribe, we can do it the better way, which is next, right, so this is our result from the next channel, which is the value channel.

[00:03:21]
And we'll say, hey, this console log. So this is like completed, this is checkmark and then the result itself. Right, so that's the checkbox transaction complete. So, let's take a look at our button here now. At the cart, yes, one thing we need to do is because we hijacked the cart, actually, let me just uncomment this, instead of calling the service, I'm going to be using this button, click next, so I'm pushing these new values into this.

[00:04:02]
This is almost like signal.set, it just pushes new values into this, but this one events, pushing events into this signals all synchronous, this one will be very much asynchronous. All right. And the reason why I'm showing you all of this is because we want to see this operator in action. We're not going to use anything else, we want to see all these 4 different operators in action.

[00:04:35]
All right, so let's see what it does. I'm going to clear my console. So we have buy tickets, right? If I buy one transaction started, 2 seconds later, transaction complete. Pretty cool, very standard, but we didn't introduce any race conditions. Let's have 2 transactions at the same time, so 1, 2, you can see 2 transactions started.

[00:05:08]
And then 2 of them complete. What merge map does. It starts them in parallel. So it starts them in parallel. So again, 1, 2, 3, 4, they all start in parallel whenever the result of them is ready, they come back. Cool, so let's change this from merge map to what's the next one concat map. Or merge map, yes, let's do concat map because they are very much related, concat map.

[00:05:49]
So merge map does things in parallel. There's a new event comes in, it starts doing it immediately, there's another one comes in, it starts the second one in parallel, again, the results are just merged back into here at the subscription. Concat map does things differently, instead of doing things in parallel, it will queue things up, so it will not start the second transaction before the first one completes, let's see it in action, so I click once again, that's the same thing, success.

[00:06:29]
Let me do 1, 2, 3, 4, I started, only 1 the other one completed, the other one started, so they are all queued up. They're not doing anything until the previous one completes. You can see where some race conditions is quite useful, right, if you're especially posting something, updating something, you want to make sure that the previous one completed before you continue with something else.

[00:07:00]
All right, so that's merge map parallel concat map sequence. Let's look at the other one which we'll call, which is called exhaust map. So exhaust map, and switch map, they again, the opposite of each other, exhaust map acts as a block, for example, you'll ignore any new requests until it's working on the new one. So if we do, again, if we just do one, it acts exactly the same as before all the other one, but if we do multiple.

[00:07:36]
All my clicks were ignored until I complete the transaction, only then I'll start listening for the new ones. So I can see it was completely ignoring all the other clicks until I complete this one. Yes, OK, so now this was the exhaust map, and let's look at the counterpart switch map. Switch map does the opposite, it cancels anything it's working on if there's a new item arrived, so, if I have an impatient user here, you can see I'm starting new transactions all the time, canceling all the previous ones, and then the last one only completes.

[00:08:35]
Right, so it basically cancels all the previous ones. So those 4 operators are the backbone of race condition handling logic. And as we've seen before, our event, our buying logic was not bulletproof. Because when we have this add ticket here. As we had before in our cart service. We're doing the post here. But we're calling this method every time, so what we have is implicitly merge map, really, so they are all starting in parallel, and we have zero control over this, zero.

[00:09:25]
Because we're just invoking the method that starts doing something they are not aware of each other whatsoever. So merge map, the dangerous default, and the concat, the queue, the protector, right, the basically exhaust map doesn't let things happen until the previous one completes.