Instructor: In the last section,
we were able to fix up that CORS error,
and now our signup action creator
is able to sign us up to the backend API,
and we are getting back a JSON web token from that API.
So now we need to take the response
that we get back from this request right here,
and make sure that we dispatch an action.
'Cause remember, we are now directly dispatching actions,
'cause we're making use of Redux Thunk
that can be picked up by our reducer,
where we're going to store that token.
To get started,
I'm gonna mark our arrow function right here as being async.
So I'm gonna put the async keyword
right in front of dispatch.
Then I will store the response that we get back
from the post request by writing out,
const response is await axios.post.
Next, underneath that we can make use
of the dispatch function.
So we're going to call dispatch and into that function
we're going to pass the action
that we want to send to all the middlewares
and reducers inside of our application.
Just as before, we do have to assign a type
to the actions that we dispatch.
So I will say type AUTH_USER
and as a payload I will include a token
that we stored inside that response.
Remember that the actual token that we send back
from our backend API is on the token property.
So in order to get a handle on that token
we'll say response.data.token, like so.
Okay. So that's pretty much it.
Now, this is not the only work that we're going to do
inside of our signup action creator.
We also have to make sure that
after user successfully signs up,
we somehow redirect them over to the feature page
inside of our application.
So we're gonna come back to this action creator
in just a moment, but for right now,
let's open up our auth reducer and make sure
that we watch for a type of AUTH_USER.
So in my reducer auth.js file, at the very top,
I'm going to import the AUTH_USER type from actions types.
So it might seem a little bit strange
that we're calling this action AUTH_USER,
as opposed to like, user sign up or anything like that.
But let me tell you a little bit behind the thinking here.
When we spoke about our overall redux state design before
we had said that we would have the one reducer
and it would have a property called authenticated.
By default, authenticated would be an empty string,
and then after user signs in or signs up,
we would put our JSON web token
on the authenticated property.
So the idea behind calling this action type AUTH_USER,
it really means to say that we are just trying
to update this authenticated property.
There's really no idea of signing up and getting a token
inside of our application,
at least from the redux reducer standpoint.
All this reducer cares about
is getting that authenticated piece of state
and so it doesn't really make sense to call it sign up,
or sign in, or anything like that.
All we really just did by making that request
was authenticate our users,
and so that's why we're calling it AUTH_USER.
All right, so now inside of our reducer,
we can put down our switch statement,
look at our action type, and if the case is AUTH_USER,
then we're going to return
all the properties we have inside of our state object,
along with authenticated,
which is going to be the JSON web token
that we just put on the actions payload property.
So authenticated will be action.payload.
Now that we've got this switch statement inside of here
we'll also move the default case into the switch statement.
So I'll say default return state,
and I will remove the bottom return state down here.
Okay, so that looks good.
Let's take a quick pause right here.
We'll come back in the next section.
We still have to do a lot of polish around this signup form.
So we'll continue in the next section.