Handle Race Conditions with RxJS

[00:00:00]
>> Alex Okrushko: We're going to open our event details page. That's the one where we have the buy button, and we're going to look at a few issues which we currently have for the buy button. Let's make sure the app is running. It is running. So right now we have 4 tickets. We do the view details here. So we have this buy button, and if it works, right, it's optimistically updating the 5 and you can click multiple times.

[00:00:34]
We see the network log. It is doing the updates for them, right? So I pushed all the tickets. That's great. Now let's do something interesting here. In our card service when we add ticket, instead of URL that we have for the ticket URL, let's just mess with this a little bit. So I'll just add whatever, something that's a non-existing URL, right, so then it should provide errors from the backend.

[00:01:18]
So remember how we have the optimistic UI? That means that if something fails, we roll back to the exact same moment. So now we know that all API requests will fail. Now, if we start clicking this buy button really fast, look at, it should be, should ideally be at 15, right? Because they all fail, we'll all fail, we should be back at 15. I start clicking this.

[00:01:48]
All right, failed, failed, failed, failed. All right, we have a lot of them failed, and once I click through all of the failed ones, should have removed that notification added error, but once I click through all of them, just give me a moment, I probably was very excited to show this demo. All right, let's just refresh the page. There you go. So it's 27.

[00:02:24]
0, 27, 15. It was 27, or 100% refresh the page. There you go. 16 for now, 16, right, so it's not 15. I clicked twice, it tried to roll back, but there was already updated other state, the parallel updated, so this is the typical race conditions. And dealing with race conditions sometimes in the applications is a little bit of an afterthought. It works on my machine, I click once, it works, I click, there's an error, it rolled back, it kind of works.

[00:03:05]
So this is what happens when we do not control those race conditions. The library that is really good for controlling race conditions, you might have heard of it before, is called RxJS, right? It's really good at controlling the race conditions. So for me, personally, you can take all the RxJS away, but please give me this race condition handling operators.

[00:03:36]
So this is what we're going to be doing in the module 3 is playing around with these race condition operators that help us do the race conditions. There you go, let's open module 3, and again, this is, we're not adding functionality here that we're going to try certain things here. We're going to introduce the concept of the subject, and subject, you can think of it as signal in a way.

[00:04:07]
It's a kind of reactive observable that we can subscribe to, basically listen from, but it also the one we can push values into. Okay, so let's hijack our event details class. This is our event details, so instead of what we typically do, which is send the event to that service, we're just going to add some logging and some race conditions into this. So we have this buy button clicks.

[00:04:47]
So this will be our private subject that will be pushing the new events into those buy clicks, right? Buy button click, and the dollar sign is a very typical of RxJS way to show that this is an observable, and this will be the new subject. Again, if you're not familiar with the subject, don't worry about it at all. Again, think of it as almost like a signal.

[00:05:13]
There's huge difference from signals, but think of it as a reactive primitive, reactive something that we can push things into and can subscribe from it and listen for all the events that are coming through it. And then in the constructor, we're going to create, this is where we're going to subscribe and start piping some events from it. So we can say, hey, those button clips, and then this is where we're going to do the pipe.

[00:05:49]
So now we're piping, we can add every value that gets into that subject will go through that pipe. And in the pipe we can have specific operators. I could have mapping operator, which is synchronous operator similar to a normal array map filter, whatever. We can do the tap, which is side effect operator. There's a number of operators. I'm not going to cover them all today.