Hi everyone.
In this video I will show you the.
But right now when we add the reaction.
Okay, right now this is what end.
Cause you will not have a forehand cross in here.
Okay, maybe if you want to know how we can apply the project into the front end, you can check out
my net JS Pro course.
Okay.
Right now let's focus on the book of the button.
Now let's say what happen with the post right here.
For example I will spark.
Code on network tab over here.
Right now I will refresh.
Now you will see I will click on password.
Here you can say with a pause here.
We have some reaction.
Come and we don't have any.
My reaction.
Okay, well now what about if I click here and I click on lock icon.
Now you can say after that it will fetch the another another API with this thing the lock it will increase
by one.
And the my reaction it will become a lot and it will show on the front end.
It totally okay that's what we expected.
So but what happened right now if I click very fast, let's say what happen if I click here now you
will say if I click like haha.
Wow.
Sad and Angry at the same time.
I could at the same time.
And I will refresh again.
And I will click on the post.
Now you can see the my reaction is totally okay, but if we check a little bit of reaction count, it
is wrong over here.
The line and the angry it already in green.
But when I only want the angry one and the line will be zero.
So we have a book right now.
Let's see what happened with dashboard.
Well, inside the button.
God, I will show you what exactly notebook this book belong into here.
Okay.
It clearly belong to here in the update reaction count.
Well, the no reason because we have a two operation when we update counts.
The first one will be we need to update the count.
Okay.
And the second one, we save that into the database.
Okay.
We have a two operation for that reason.
In this case we need to somehow group that into one single unit operation.
Will we will using the atomic operation okay.
We will somehow use the atomic operation converted into atomic operation.
And, uh.
So but before that, let me show you why we got the error.
Well, let's see the timeline.
I will prepare for you fully.
For example, we have a request for like and we have a request for maybe.
Haha.
At the same time.
Probably we could add reaction like okay.
And right now we also call the address and haha at the same time, right?
So right now when this process go to the end and it will check the data.
Why?
Well the database, it will say right now we don't have any existing reaction.
And right here we also don't have any existing reaction for that reason.
In this case it will create the like reaction and it will create the haha reaction.
And right now it will increment and increment.
So for that reason After this process, it will have something like like one and one.
Okay, that's not what I expected.
Clearly right now, let's say the algorithm, the center.
First of all, I have a like and I have a log request.
I will send the request into the server at the same time right here.
Because we send that immediately the server it will check.
It will check right here.
We don't have any lines in the database.
And we also don't have any log inside the database.
Right.
So for that reason the server over here it will somehow process.
Okay.
It will not see anything.
So for this guy.
In here we increased by one in the heart and in the next one we also increased.
Would have something like a lot.
And it will increase also.
And it will save that into the database.
Okay.
So that is so for a reason.
In order to fit that I will combine this thing and I will uncomment this.
I will add it here and I will combine this here.
Now let's see what is here.
But before that let me go back to the database and I will uh Allow.
I will change the post a little bit.
I will go back to the previous one will be angry.
I will find a spot of that bottle over here.
Okay, I already changed the database and let me refresh the frontend application.
Click on post over here.
Now you can see we only have angry and my reaction for now.
Let me click very fast.
Okay I already colored and let me refresh the application.
Come on, boss.
Right here you will see the.
My restaurant will be.
Wow.
And now let's say we only have a one.
Would be one.
So what exactly happened?
Well, if that's the reason.
Because I already prepared some atomic operation.
The whole point is this guy will be this line of code.
Okay, I will show you.
In here, we use the in.
Operator, this is atomic operation.
We call it only a single unit.
Okay.
It it somehow.
Update and save into the database at the same time.
Okay, so for that reason, it will not have any in in corruption between The update and say that it
will fix the issue.
Now let's look at the code over here.
I already commented very detailed.
I will leave that code for you.
Okay, you you can copy and paste.
Thirdly, we also need to check the existing reaction okay.
And do some check over here.
For now we will prepare for increment and decrement operation for reaction okay.
Right now I will assume we increase the count with a new reaction will be one.
Because if if this is not a new reaction it already prevent in here right.
So right now we need to check like if we already existing reaction what we need to do.
We need to update for sure.
And we need to remove all existing reaction.
Okay.
This is the old reaction to remove that.
And here if we.
We can add a new one over here.
And the whole point is this line of code okay.
It will somehow automatically group the update and say at the same time unlike previous one.
Okay, this is the two line of code, right?
We.
Add it and we save that for that reason.
Between this here and this here, it can be incorrect okay.
Another request can go in the middle over here.
So for that reason we need to check that.
And if you don't fully understand right now.
You can check out my blog again called industrial.
I already showed you how to avoid the right condition.
And what exactly about the atomic operation and how we can prevent us using the atomic operation and
using the lock technique?
Okay, right now I just want to show you what is atomic, and I already show you why it works like that.
Okay.
And the remove reaction is also the same.
Okay.
It is exactly the same with previous one.
But the section this line.
Okay.
Right here we need to delete and remove that immediately.
This is also the atomic operation.
You can see I already write the another code inside the Inside of it.
Right here.
Very easy.
We will find one and delete with the post and user.
Okay.
We need to go directly over here.
Okay.
Don't try to file one.
And after that delete instead of.
We should use the atomic operation.
We will find one and delete.
This is the atomic operation because it will somehow.
Find and delete at the same time.
It don't have any interruption between them.
Right.
So it will avoid the right condition.
And on on the control here will be exactly the same.
So.
That's it for the video.
So I will see you in the next one.