That wasn't nice and easy.
So now let's complete our register user functionality.
And the first thing that we want to do is import our access library and in the registered user.
Right from the get go, we want to dispatch register user opinion and as far as how we're going to handle
that action and the reducer.
Well, like I said, most set up is loading to true.
So essentially, we're indicating that now we're performing the actual request.
And as a result, or user won't be able to click one more time submit button.
So that's the first thing I ever wanted when we want to set up, try and catch because we might encounter
synchronous error and therefore using try and catch is super nifty.
And then since Axios returns a promise, we want to go with award and also set up our function as async.
Now, I don't remember whether I already set it up or not, but essentially this is what you need to
do.
You set it up as I think, and then we go with it.
And then as far as the syntax, we go with actions and then post which signals that this is going to
be a post method.
Now why we want to set it up as both method.
Remember, that's what we require in our server.
Correct.
And as a quick sign of actually other options that you can use for syntax as far as access is concerned,
for example, if you navigate to the docs, you look at Axios API, you can go Axios and then pass in
the object.
But again, it is my preference here where I just set up the post right away.
The method post patch get more deleted and then we need to provide the URL, which again is going to
start with Portrush.
We already covered up in the proxy.
And what do you know?
What is the path?
Well, it is API version one.
And then off and then register, and then we want to pass in the data that we're going to be sending.
Since remember when we were testing this out in the postman, we also needed to provide a data correct.
So we need to provide all these values.
And that's why the second argument is going to be that current user.
So that's going to be the object.
Now I will log the response in our first request just because I want us to be all on the same page.
But essentially, we're getting back a giant object with a bunch of useful information.
But our response?
So this one over here, the user, the token and location is going to be in the data property.
Always.
I mean, in this version of access is going to be in the data.
Now they might switch that around later, but I highly doubt that.
So we're looking for data property and what are we looking for here?
User token location.
And I don't think I need to switch screens to showcase why we're looking for those things when we want
to dispatch registered user success.
And then in here, remember when it comes to dispatch, we definitely need to go with type part.
Optionally, we can also pass in other things.
Now, in this case, those other things is a payload object with user token and location.
And if we scroll down and take a look at our action type in this case in the reducer, what are we doing?
Well, if the action type is success, here are the steps.
First, I want to return to state just like I did over here with ease.
Loading.
Basically, I want to copy all the values and then just modify one thing, not the entire state, because
remember, eventually there's going to be way more properties there, and the user is going to be equal
to what action payload user than token action payload token.
And hopefully you see where I'm going.
Now, the only thing that's going to be probably a little bit confusing is going to be this one, the
job location.
And this probably is going to make way more sense once we actually could get there.
But since I have tendency to forget stuff, I'll actually add this right away state the job location,
but I'll discuss this one in greater detail once we actually set up that page when we want to set up.
Is loading false?
Why?
Well, because here we're loading online.
Once I get back the data, I mean, I don't need to actually restrict the button.
Correct.
And I want to display the alert.
And then since I want to display the green alert box, I'm going to go with success.
That's going to be type and not whatever you want to type here.
I'm going to go with user created and then redirecting dot dot dot because eventually, like I said,
we will redirect our user to the dashboard.
So this is if we have a registered user success, let's go back to our function registered user and
let's take a look that also eventually, I want to add this to a local storage because they won't be
persistent in reacting.
And also, we might have the case of error, for example, the one that I have been hitting quite often
where email is already in use, correct?
And again, since this is our first request.
I'm going to go with error and then response, because this is where with Axios, we get Bond Chef useful
info again, this is going to be a giant object and we're looking for data and that message, why?
Well, because remember our set up in the server?
What are we sending back?
We're here.
Message.
So it's going to be in the data and then more specifically, message.
And then this one, I'm passing again in the payload.
So in the reducer, I'm going to go with alert now.
Again, loading will be false because we're downloading and then Charlotte through an alert type in
this case, danger.
And then we go with action, payload and the message.
And before we start setting everything up, let me just mention that when it comes to a payload, property
is just a convention effectively.
If you prefer naming it, for example, banana bread instead, I mean, go for it as long as you leave
the Typekit alone, meaning as it is, there will be no issues.
But since payload is somewhat of a convention, I'm not going to be a rebel and I will follow the conventional
approach.