In this video.
Let's finish up with the reducer and then the action.
Even though we were able to log in back, we are not managing the state or we are not keeping track
and it changes in our application.
So inside the component and then the context, let's open the of contexts.
So what we want to do is that we want to update this state with the response that came back when we
make a request to our endpoint to log in.
So we want to update the user off with the response that came back.
And in case we have an error, we want to update the error property here also.
So how can we achieve that?
That is why we have the reducer.
So the reducer is going to take the action type and then the reducer is going to do some computation
to update the states.
So let's see how we are going to implement it.
So now let's move this one.
So first step is that we are going to check the action type that is coming in into this reducer.
And remember, we can do that one using the switch statement.
So here we make use of action.
And on that we're going to have a property called type.
So we'll be asking where from this one.
So let me show you where you go to type.
So inside the log in user action, we are going to make this or this dispatch function for use reducer.
So here we are going to dispatch two actions.
One is for success here and then for error.
So here after the response, we are going to dispatch an action and here we go as a function, call
the pass in an object.
And for this object we are going to specify what is called type.
And this type is what I have access on the action.
So here, the type here is going to be as log in success.
All right.
And this is we are going to send some data to update the states.
So here I will provide what is called payload.
By convention is payload.
So here, what data that you want to send to the reducer is the response coming back.
So here we are going to make use of response data.
Remember, we have the actual response on the data.
Good.
But before we dispatch, we need to make some conditions because we don't want to dispatch success when
we have an error.
That is why on the response we have what is called status, where we have some error here.
So let's try to comment this one that is inside and I want to show you something.
So again, let's get back here and log in with the add on and the password is going to be one, two,
three, four, five and hit send and let me check where I got some error here because of the reducer
function.
But lucky for us I have the response.
So here I want to check if response the data, the status is equal to success, then I'll go ahead and
then dispatch that.
So here let me cut it.
And now I'll make some condition and say response dot data dot status is equal to success.
Do you remember when we're developing the API and I said that let's provide status equal to success
or failure because you will need it in the front end.
And this is a time.
So here we put in our dispatch, remember as soon as we add component get rendered, the code inside
is going to be called instant.
So by the time our component got rendered, there will be no data on the response.
In that way you are going to see an error that cannot access a property of undefined and this is an
error that we are going to face a lot.
So to avoid this one, let me show you one clue here.
You need to make what is called conditionals.
So here, let's cut this one from here.
And now let me show you something here.
So here we go.
We bring in response and then double end operator and then response dot data.
So what does it mean?
It simply means that if we have a response and then on the response, we have a data, then go ahead
and use it.
And also we are also checking for status.
So here we go.
We also going to check if the response dot data and then dot status.
So this one means that if we have an object and we have a data on it, then go ahead and use this property.
And also, if you have a data with a property or status, go ahead and use it for this syntax.
There is no way you're are going to see this kind of error.
But for ES6, we can shorten this one using what is called optional chaining.
So let's try to rewrite this code like this.
So rest and then question mark and then period and then data question mark and then period and then
styles.
It is same as before.
And this means that if you have a response object and on that we have a data, go ahead and use this
title.
So here we go.
So now I am dispatching an option from here.
So the same thing for Arrow.
We need to dispatch an action also.
So I'm going to copy this one.
And at this point, you know that we have an arrow, but the action type here is going to be failed
as failed.
So here we are using dispatch to be able to send the response coming back from the request and then
to update our state.
So now let's have access to it here.
So here the action type watch will present this one.
So here we go and are going to make use of case.
If the case is equal to log in success, then colon and here we are going to update our states.
So if you console.log the action, we are going to see the payload.
So let's try out and see.
Let's console the log, the action.
Now.
Moment of truth.
So here.
Think we got some error here?
Response is not defined on line by eighths of context.
Line number 50.
Sorry.
Which is here.
Let's see.
Oh, sorry.
It's supposed to be error.
Well, and for this one to be able to get the actual error response, remember, it is not on the data,
but instead it is on error.
And then question mark.
Dot responds.
Question mark.
Dot Data.
Question mark.
Dot message.
You saw it in the console, right?
So that is it.
So let's try again and then look in.
So here, let me clear the console here and let me provide the username Adam at Gmail.
Dot com and a password.
One, two, three, four, five.
And let me hit st.
And let's have a look.
You can see that on the of line number 48.
This is what we got.
Remember line number 48 on the off context?
And what is line number 48, which is this one?
Oh, no.
I am expecting this one to be called the action here.
That is going to be called.
So what is the problem?
Let's make sure that we are typing the same log in success and here to look in success.