All right.
And the first approach I want to showcase is the manual approach.
And notice how in the update user, they're going to be no actions, nothing of that sort, because
again, we'll focus only Axios first.
And then once I show you multiple approaches and then once we settle on the one that we're going to
use throughout the project, then we'll implement the actions as well.
And the manual approach is going to look something like this when we go with Axios.
Now we need to go with Patch because remember, we're updating here and the URL is API version one off
and blah blah blah, then current user.
So that's the data that we're passing and just like with a post request.
And as a third argument, we can actually pass in the options and not in the options.
There's a ERRORES property.
And surprise, surprise, we go with authorization.
Now what is the value?
Well, again, we go with this syntax bearer, event space, and then we need to set up the token and
where the token is located while it's located in a state correct.
So we're going to state that and then token.
And for the time being, I just want to showcase the data that we're going to be getting back.
I mean, we already saw that an endorsement.
I just want to make sure that we are all on the same page.
I'm not as far as the error.
Well, for now, let's just log it and remember it is in the error, dot and response.
So let's get cracking.
We want to go to you app context first and learn where we have update user think.
We're going to remove that log and then what's set up to try and catch chaos.
And then let's go at concert data and then that one is equal to await acts here or instance.
And then patch.
Now let's set up the URL where it's going to be API version one and then off and then update user.
And let's pass in the current user.
And also, let's set up the options where we're going to go with headers.
I'm not like I said, it's going to be an object.
And then the header we want to set up is the Authorization Act.
So hopefully I spelled it correctly then why there's going to be a bug and then we want to set up the
bearer and I'm using template string since.
Now I want to access the value, correct?
So let's just scroll up and let's go one more time.
This is our state and this is our initial state.
So we set up here the state as a default equal to initial state.
And then if I want to access something, I go with state dot and token and difference.
When we have users, there is the fact that I'm not updating the state directly.
So that's where we use the actions in this patch and all that.
But as far as accessing, yeah, we don't know what state not.
And then whatever is the value in our case, that is our token.
So let's go here and let's say state and not token, then I do want to lock the data like I said.
So let's go with data.
And then also, let's do the same thing with error and line response.
It's navigate to a browser window and once this start out.
So at the moment, I have the beta because I believe I changed it in one of the post many videos.
So now let's go back to John.
So I'm going to set it up here as John.
That's the name in the input value.
Let's save it.
And now let's take a look at our response.
So notice here how I have update user unless it's 200.
So let me click on this one.
And now let's take a look at what we're getting back over here.
So first of all, we can see that with a request.
This was our bare token.
That's what we are sending when we are making this request.
That's number one.
And then as far as the response, well, first of all, I guess let's go with preview.
Now this is what we'll be getting back.
So again, we have location token as well as the user.
So hopefully this makes sense.
And if, for example, I go with the empty value, in this case, maybe you look mirrored the name.
And since we're not checking that on the front end, we should get back the error response.
So once we send.
Now I have that user and the message is please provide all of ours.
So hopefully we're clear on this one because this is a very important first step where again, we have
the endpoint on the server and then on the front end, which we simply doing, we have these forms and
then we just grab the input values and then we send it off to a server.
And then on a server, we check browser provided awesome.
Then we update everything and eventually will update the state here as well as well as these values.
But that is coming up.
And if there is an error, then of course we send back the error response.
So hopefully we are clear on this and all this talk about the downside on.
Of such approach, because as you're looking at here, like, OK, so where's the issue?
Let's just start setting everything up.
Let's go with actions and then let's complete the application.
Now the thing is, yeah, I mean, you can set up your entire application in such manner, but first
of all, you copy and paste a bunch of stuff.
So essentially, with every request, you'll have to go again with Hatter's authorization and there.
And then there's another thing where eventually I want to check for four or one responses, meaning
the authorization error responses as the requests are coming back.
Because if that's what I'm getting, then we need to talk about what is going to be our response on
the front then.
And I know I'm skipping a little bit of head.
So probably in the upcoming videos, I'll keep repeating that.
And actually we'll have the set up only at the very end of the actual videos where we actually can check
for those four ones.
But that's also something that we're not doing at the moment.
So if you want to just focus on one thing that essentially we want to go with different set up because
there's quite a bit of repetition if we're individually setting up our bare tokens in such a way.
Now, if you have some one off request, that's definitely an option.
Again, the syntax is you go with whatever method than you set up the URL.
You pass in the data you want to send to the server room and you just need to include the headers in
this case authorization.
But if you have multiple requests, which is going to be our case, keep in mind our job, all job stats.
Now, all of them will use this approach.
So we might as well take a look at our other options when it comes to actions.