WEBVTT

00:00.880 --> 00:02.280
Hi everyone.

00:02.280 --> 00:06.680
In this video I will show you the.

00:06.720 --> 00:12.120
But right now when we add the reaction.

00:12.440 --> 00:14.680
Okay, right now this is what end.

00:14.680 --> 00:19.720
Cause you will not have a forehand cross in here.

00:20.200 --> 00:30.040
Okay, maybe if you want to know how we can apply the project into the front end, you can check out

00:30.080 --> 00:32.960
my net JS Pro course.

00:33.120 --> 00:33.600
Okay.

00:34.320 --> 00:37.600
Right now let's focus on the book of the button.

00:38.040 --> 00:41.000
Now let's say what happen with the post right here.

00:41.480 --> 00:43.840
For example I will spark.

00:47.400 --> 00:50.600
Code on network tab over here.

00:51.080 --> 00:52.680
Right now I will refresh.

00:56.480 --> 00:58.520
Now you will see I will click on password.

00:58.520 --> 01:02.500
Here you can say with a pause here.

01:04.940 --> 01:07.140
We have some reaction.

01:07.140 --> 01:11.380
Come and we don't have any.

01:11.540 --> 01:12.820
My reaction.

01:13.180 --> 01:19.540
Okay, well now what about if I click here and I click on lock icon.

01:20.500 --> 01:31.260
Now you can say after that it will fetch the another another API with this thing the lock it will increase

01:31.260 --> 01:32.300
by one.

01:33.140 --> 01:38.860
And the my reaction it will become a lot and it will show on the front end.

01:39.460 --> 01:42.900
It totally okay that's what we expected.

01:43.380 --> 01:52.460
So but what happened right now if I click very fast, let's say what happen if I click here now you

01:52.460 --> 01:55.260
will say if I click like haha.

01:55.460 --> 01:56.020
Wow.

01:58.220 --> 02:01.030
Sad and Angry at the same time.

02:01.070 --> 02:02.950
I could at the same time.

02:02.950 --> 02:04.470
And I will refresh again.

02:07.550 --> 02:09.190
And I will click on the post.

02:12.310 --> 02:20.510
Now you can see the my reaction is totally okay, but if we check a little bit of reaction count, it

02:20.910 --> 02:22.350
is wrong over here.

02:22.390 --> 02:25.350
The line and the angry it already in green.

02:25.350 --> 02:31.870
But when I only want the angry one and the line will be zero.

02:32.150 --> 02:34.710
So we have a book right now.

02:35.950 --> 02:39.390
Let's see what happened with dashboard.

02:40.670 --> 02:44.470
Well, inside the button.

02:44.470 --> 02:49.830
God, I will show you what exactly notebook this book belong into here.

02:51.030 --> 02:51.510
Okay.

02:51.550 --> 02:56.870
It clearly belong to here in the update reaction count.

02:57.350 --> 03:04.610
Well, the no reason because we have a two operation when we update counts.

03:05.010 --> 03:08.210
The first one will be we need to update the count.

03:08.250 --> 03:08.650
Okay.

03:08.690 --> 03:12.010
And the second one, we save that into the database.

03:13.050 --> 03:13.330
Okay.

03:13.370 --> 03:15.850
We have a two operation for that reason.

03:15.850 --> 03:23.330
In this case we need to somehow group that into one single unit operation.

03:24.890 --> 03:29.490
Will we will using the atomic operation okay.

03:34.650 --> 03:39.570
We will somehow use the atomic operation converted into atomic operation.

03:40.730 --> 03:41.730
And, uh.

03:44.090 --> 03:48.410
So but before that, let me show you why we got the error.

03:49.210 --> 03:51.090
Well, let's see the timeline.

03:52.330 --> 03:55.410
I will prepare for you fully.

03:55.450 --> 04:03.780
For example, we have a request for like and we have a request for maybe.

04:05.820 --> 04:06.380
Haha.

04:07.660 --> 04:08.700
At the same time.

04:11.300 --> 04:17.100
Probably we could add reaction like okay.

04:17.660 --> 04:22.740
And right now we also call the address and haha at the same time, right?

04:23.660 --> 04:30.980
So right now when this process go to the end and it will check the data.

04:30.980 --> 04:31.300
Why?

04:31.900 --> 04:37.540
Well the database, it will say right now we don't have any existing reaction.

04:37.700 --> 04:44.460
And right here we also don't have any existing reaction for that reason.

04:44.460 --> 04:50.580
In this case it will create the like reaction and it will create the haha reaction.

04:51.380 --> 04:54.500
And right now it will increment and increment.

04:54.500 --> 05:04.960
So for that reason After this process, it will have something like like one and one.

05:05.120 --> 05:08.440
Okay, that's not what I expected.

05:08.840 --> 05:13.240
Clearly right now, let's say the algorithm, the center.

05:13.240 --> 05:18.640
First of all, I have a like and I have a log request.

05:19.040 --> 05:24.120
I will send the request into the server at the same time right here.

05:24.120 --> 05:29.200
Because we send that immediately the server it will check.

05:30.360 --> 05:32.520
It will check right here.

05:32.520 --> 05:34.800
We don't have any lines in the database.

05:34.800 --> 05:38.680
And we also don't have any log inside the database.

05:38.720 --> 05:39.200
Right.

05:39.680 --> 05:43.600
So for that reason the server over here it will somehow process.

05:49.000 --> 05:49.480
Okay.

05:52.480 --> 05:55.120
It will not see anything.

05:55.580 --> 05:57.580
So for this guy.

06:00.580 --> 06:12.540
In here we increased by one in the heart and in the next one we also increased.

06:15.260 --> 06:18.860
Would have something like a lot.

06:19.460 --> 06:21.100
And it will increase also.

06:21.140 --> 06:23.220
And it will save that into the database.

06:25.420 --> 06:25.900
Okay.

06:26.460 --> 06:28.380
So that is so for a reason.

06:28.420 --> 06:33.460
In order to fit that I will combine this thing and I will uncomment this.

06:40.660 --> 06:43.580
I will add it here and I will combine this here.

06:43.980 --> 06:45.740
Now let's see what is here.

06:50.300 --> 06:54.550
But before that let me go back to the database and I will uh Allow.

06:55.550 --> 06:57.510
I will change the post a little bit.

07:01.550 --> 07:05.470
I will go back to the previous one will be angry.

07:09.110 --> 07:12.910
I will find a spot of that bottle over here.

07:24.430 --> 07:30.990
Okay, I already changed the database and let me refresh the frontend application.

07:32.350 --> 07:33.830
Click on post over here.

07:34.670 --> 07:41.310
Now you can see we only have angry and my reaction for now.

07:41.630 --> 07:43.150
Let me click very fast.

07:46.510 --> 07:52.070
Okay I already colored and let me refresh the application.

07:54.290 --> 07:55.130
Come on, boss.

07:56.330 --> 07:57.490
Right here you will see the.

07:57.490 --> 07:58.850
My restaurant will be.

07:58.890 --> 07:59.410
Wow.

08:00.210 --> 08:05.370
And now let's say we only have a one.

08:05.370 --> 08:06.450
Would be one.

08:06.490 --> 08:08.850
So what exactly happened?

08:09.170 --> 08:11.130
Well, if that's the reason.

08:11.130 --> 08:14.570
Because I already prepared some atomic operation.

08:15.570 --> 08:19.090
The whole point is this guy will be this line of code.

08:19.810 --> 08:21.050
Okay, I will show you.

08:21.650 --> 08:23.530
In here, we use the in.

08:24.810 --> 08:28.090
Operator, this is atomic operation.

08:28.530 --> 08:31.930
We call it only a single unit.

08:31.970 --> 08:32.450
Okay.

08:32.850 --> 08:34.490
It it somehow.

08:37.770 --> 08:43.930
Update and save into the database at the same time.

08:44.450 --> 08:55.790
Okay, so for that reason, it will not have any in in corruption between The update and say that it

08:55.790 --> 08:56.710
will fix the issue.

08:57.030 --> 08:59.790
Now let's look at the code over here.

09:00.470 --> 09:02.510
I already commented very detailed.

09:02.510 --> 09:04.030
I will leave that code for you.

09:04.070 --> 09:06.350
Okay, you you can copy and paste.

09:06.710 --> 09:10.790
Thirdly, we also need to check the existing reaction okay.

09:10.830 --> 09:12.470
And do some check over here.

09:13.310 --> 09:21.550
For now we will prepare for increment and decrement operation for reaction okay.

09:21.910 --> 09:27.830
Right now I will assume we increase the count with a new reaction will be one.

09:28.150 --> 09:35.350
Because if if this is not a new reaction it already prevent in here right.

09:36.190 --> 09:44.470
So right now we need to check like if we already existing reaction what we need to do.

09:46.870 --> 09:49.230
We need to update for sure.

09:49.910 --> 09:54.960
And we need to remove all existing reaction.

09:55.000 --> 09:55.320
Okay.

09:55.320 --> 09:58.720
This is the old reaction to remove that.

10:00.520 --> 10:02.640
And here if we.

10:05.080 --> 10:07.560
We can add a new one over here.

10:08.040 --> 10:14.400
And the whole point is this line of code okay.

10:14.880 --> 10:23.560
It will somehow automatically group the update and say at the same time unlike previous one.

10:24.360 --> 10:27.560
Okay, this is the two line of code, right?

10:29.680 --> 10:30.120
We.

10:32.560 --> 10:36.320
Add it and we save that for that reason.

10:36.800 --> 10:42.800
Between this here and this here, it can be incorrect okay.

10:42.840 --> 10:46.400
Another request can go in the middle over here.

10:46.880 --> 10:49.320
So for that reason we need to check that.

10:49.720 --> 10:53.260
And if you don't fully understand right now.

10:53.300 --> 10:58.260
You can check out my blog again called industrial.

10:58.300 --> 11:03.020
I already showed you how to avoid the right condition.

11:03.460 --> 11:12.980
And what exactly about the atomic operation and how we can prevent us using the atomic operation and

11:13.620 --> 11:15.500
using the lock technique?

11:15.940 --> 11:24.860
Okay, right now I just want to show you what is atomic, and I already show you why it works like that.

11:25.620 --> 11:26.100
Okay.

11:26.820 --> 11:31.540
And the remove reaction is also the same.

11:32.500 --> 11:32.940
Okay.

11:32.980 --> 11:35.660
It is exactly the same with previous one.

11:35.660 --> 11:37.620
But the section this line.

11:38.700 --> 11:39.060
Okay.

11:39.060 --> 11:43.380
Right here we need to delete and remove that immediately.

11:44.140 --> 11:46.300
This is also the atomic operation.

11:46.660 --> 11:51.430
You can see I already write the another code inside the Inside of it.

11:52.710 --> 11:53.350
Right here.

11:53.590 --> 11:54.390
Very easy.

11:54.870 --> 11:59.510
We will find one and delete with the post and user.

12:01.030 --> 12:01.550
Okay.

12:01.910 --> 12:07.110
We need to go directly over here.

12:07.590 --> 12:08.110
Okay.

12:08.470 --> 12:11.030
Don't try to file one.

12:11.350 --> 12:13.830
And after that delete instead of.

12:13.830 --> 12:15.830
We should use the atomic operation.

12:15.830 --> 12:17.870
We will find one and delete.

12:18.670 --> 12:23.070
This is the atomic operation because it will somehow.

12:25.270 --> 12:28.470
Find and delete at the same time.

12:28.990 --> 12:31.910
It don't have any interruption between them.

12:32.470 --> 12:32.950
Right.

12:33.470 --> 12:35.750
So it will avoid the right condition.

12:36.630 --> 12:40.710
And on on the control here will be exactly the same.

12:41.910 --> 12:42.350
So.

12:45.350 --> 12:46.550
That's it for the video.

12:46.670 --> 12:49.750
So I will see you in the next one.