-: In the last section
we finished a short diversion onto the topic of cors.
Remember, cors is something that occurs
when an AJAX requests,
in the browser specifically,
makes a request to some different domain,
port or sub domain.
Some different API server out there.
We ran into it specifically because our app here
our JavaScript application, is running on localhost:8080
but we're trying to access an API server
on localhost:3090.
And so we got a cors error.
We fixed it by enabling cors on our API server.
So that was a little bit of a diversion
completely unrelated
to our sign-in user action creator here.
So now we're again, changing gears
coming back to the sign-in user action creator.
As a reminder, we're using redux thunk here.
So we're gonna return a function,
instead of an action because we're returning a function,
we get access to the dispatch method
and that allows us to make some asynchronous decision making
or request or anything asynchronous inside of this function.
And then at any point in time
we can use this dispatch method to just go ahead
and dispatch an action.
Just as we usually would from an action creator.
So going back to what we were working on before,
we now need to handle these two different cases.
We need to handle the case in which a request is successful
and the case in which a request is failed
or there's some sort of error attached to it.
So we really need some sort of like,
kind of if statement here, right?
But we have an AJAX request
which is asynchronous in nature.
So rather than using an if statement
we're gonna make use of a promise here.
Remember, axios always returns a promise,
whenever we make a request
I'm gonna remove the semicolon on the end of the line here.
And then on a new line
I'm gonna add in a .then and a .catch.
So these are two kind of constructs
coming out of how a promises work.
This is not necessarily related
directly to axios, redux or react.
These are just JavaScript promises.
If you're not familiar with then or catch
I recommend you do a little bit of research
on your own to figure out exactly how they're working.
So in the success case, which would be the .then,
we want to basically
take care of these three things right here.
We want to update our state to indicate
that the user is authenticated.
We wanna save the token and we want to redirect our user
to the route specifically feature.
So when, when we hit this .then case
it's gonna be called with our response from the API.
And inside of here is where we'll take care
of these three different cases
or these three different actions we want to
kind of accomplish.
So gonna move our comment in there
and then as long as we're doing it.
I'll also move our comment for the fail case
into the catch as well.
So now when we make our request, if it's successful
we're gonna hit the .then
and we're gonna run this inner function.
If our request fails, excuse me
if our request fails, we're gonna hit the .catch case.
So out of the success case here,
out of the like
the kind of the good things we wanna have happen ,
let's take care of the bottom one first.
We want to redirect our user to the route feature.
So when I say redirect here
I mean specifically redirect using react-router.
We don't wanna like do
a total reload of the page or anything like that.
We wanna still do
JavaScripts single page application navigation.
So we want to swap out the views
that are visible on the screen.
All of the navigation
that we've done inside of
our react-router application so far
has been done using the link tag.
Remember the link tag? We've been using link
which is a component from react-router,
it produces an anchor tag
and then when someone clicks on a link,
they get navigated somewhere.
And so this is something that's completely different
or I shouldn't say completely different
but a little bit different in nature.
We still wanna navigate someone somewhere
but we don't want to depend upon the user
clicking a link to do it, right.
Keep in mind that when a user is signing up
or excuse me, signing in, we don't want them to, you know
the instant they click a button
we don't wanna navigate them somewhere.
We want to wait for the request to finish
and then navigate them.
So this is what we would refer to as programmatic navigation
or navigation that we are gonna trigger with our code
as opposed to by a user kind of clicking on something.
So to do programmatic navigation,
react-router exposes a pretty simple little API.
We're going to add an import statement at the top
and we're going to import browserHistory from react-router.
Remember, the purpose of browser history right here
is to communicate information about the URL to react-router.
We can also use browser history
in kind of the reverse functionality.
We can use it to make changes to the URL as well.
And so that's exactly how we're going to do
our programmatic navigation here.
The very bottom of this function,
I'm gonna add browserHistory.push,
and we're gonna push the user straight
to the feature endpoint.
And so that's gonna accomplish
this kind of step 3 thing right here.
Whenever a user successfully submits an email and password
and they are authenticated and we get a token back,
we want to just push that user to feature,
just send them off to the feature route.
So let's give this a shot at in the browser.
I'm gonna flip back over to Chrome.
I'm gonna refresh the page.
I'm gonna enter an email and password that I know worked
because we set these up in the last section.
I'll sign in and you'll notice
that we don't quite have anything popping up just yet.
Let's take a look at our...
Looks like our bundle is still valid.
Ah, there it is.
You know what, I'm not gonna lie,
I did this several times in a row now.
BrowserHistory, not browerHistory (chuckles)
Okay!
BrowserHistory
BrowserHistory.push feature.
Let's give this another shot.
I'm gonna refresh again
And, alright, so you'll notice that
the URL in fact did update to feature
and it only did so when the request was complete.
Let's try this again.
But this time, instead of putting,
I need to manually go back to sign in for the route.
So I'm gonna go back to sign in.
There we go.
But this time I'm gonna put in a bad password.
And so now we got an error back from our API
which means we've did not hit the then case.
We hit the catch case instead.
So we didn't hit that browserHistory push.
We instead hit our catch case right here.
So this is looking good.
We're definitely going down the right road.
Let's continue the next section
where we will start working on the other two things
we need to do, which is to update our state
and save the JWT token that we get from the back end.
I'll see you there.