Instructor: In the last section,
we hooked up Redux Thunk.
Redux Thunk is a middleware that allows us to
return a function from an action creator
instead of an action.
That function will then automatically be called whenever
we return the function with the dispatch method from Redux.
So this function is automatically called
for us with the dispatch method.
The dispatch method is the method inside
of Redux that accepts an action and forwards it off
to all the different reducers we have in our application.
In other words, it's basically
like the main pipeline of Redux.
The purpose of Redux Thunk is to allow us to
dispatch multiple different actions inside
of an action creator.
So with Redux Thunk, we are not limited to a single action,
we can dispatch as many as we want.
And we can also insert a bunch
of other logic in here as well.
So in our case, we can handle both the different cases
in here, for whether or not the request is good and bad.
And if the request is good
we can also handle all these different side effects as well.
This is all thanks to Redux Thunk.
One thing to really keep in mind here is that
with a normal action, whenever we turn an object
it's a very kind of synchronous operation, right?
That action is taken and it's immediately
sent off to all the different reducers.
With Redux Thunk, there is no synchronous action here.
The function will be called with dispatch
but we can wait as long
as we want to dispatch an action.
We don't have to do it right away.
We can do it at any time we want.
So let's see what it looks like in action by
taking care of the first step in here;
which is to submit an email and password to our server.
Now, one thing to really pay attention to here is
that the server that we're making reference to
is not the webpack server.
You know it's not the server that's hosting our client here.
It is our API server.
It is the server that's handling all that
authentication logic for us.
And it's actually, as a matter of fact,
not currently running in our dev environment.
So in order to make a request to it
we need to first start the server up.
So I'm gonna flip back over to my terminal and right now
you know for sure we're running our dev server
or our webpack server, our kind of content server
that serves up the JavaScript application
but we're not running the application that connects
to Mongo and checks the username and password, you know
all that kind of good stuff.
So it's totally fine to run multiple servers
on your computer at the same time
as long as they're on different ports.
I'm gonna open up a new tab on my terminal.
And if you are running a terminal
like say Windows command line or what have you, where there
you know, there is no concept of tabs, that's no problem.
All you have to do is open up a second Windows prompt.
So I'm gonna navigate to my server directory.
And again, this is the server that we built
in the last section.
And I'm gonna start the server up with npm run dev.
Remember that you also need to be running Mongo
at the same time as well.
I'm already running Mongo in the background
but if you get an error message that says
like cannot connect to Mongo server on 27 01 7
make sure you start your Mongo server up as well.
You can do that by executing the command mongo d.
And so if I do it, it's gonna say "Address already in use"
because I'm already running an instance of Mongo right now.
Okay, so our API server is up and running.
This is a standalone server.
All it does is handle AJAX requests issued
by our JavaScript client.
And most importantly, the server is listening on Port 30 90.
So this is the port that we will make AJAX request to.
And as long as we make a AJAX request to port 30 90
we should be good to go, we'll get a response back.
Everything should work out just fine for us.
So let's flip back over to Atom.
As convention, what I really like to do
is whenever we have a kind of a very distinct URL
or distinct URL for an API that we want to access
I like to declare it at the top of my action creator's file
as a variable that I usually will call something
like root URL, or you might also call it like API URL.
It's totally up to you.
And inside of here, I just put the URL of my API server.
So for us, it is always gonna be localhost port 30 90.
So again, we're trying to achieve step one here.
We just set the server up, we're good to go there
but we need to actually submit the email and password.
And so this will take the form of an AJAX Post request.
To make a post request, we need access to the Axios library.
Just as we've used several, several times before,
we've made use of Axios.
So Axios is a third party library
which means we're gonna have to flip back
over to our terminal, install it.
I'm gonna make sure that I am on my webpack tab.
So, I'm on my webpack directory here.
I'm gonna stop my webpack server,
making sure that I'm still in my client directory.
And I'll run an npm install, save Axios.
Do make sure that you're installing this
inside the client directory and not the server directory.
Obviously, if you install it in the server directory
you know it's totally separate project from our client.
All right, so it looks like that installed a-okay.
I'm going to start the server back up
with npm run start and webpack comes back up for us.
Awesome.
And so we've made use of Axios
a couple times before, nothing too crazy here.
At the top, we'll import Axios from Axios.
And then to submit our email and password to the server,
we wanna make a post request.
So we'll use the method axios dot post.
The arguments for this are first the URL that we wanna post
and then the data that we want to post to.
So the URL that we want to post to is going to
be the route URL slash signin.
Remember, these are all routes that we already
put together when we put together our server application.
As a matter of fact, we can check those out really quick.
I'm just gonna pull up our server really quick just
so we can double check on that.
So this is our server,
here's the router for it.
And remember, we made a route handler to
handle the post action to specifically the route signin.
So this is why we're using specifically
that route signin right here.
So we'll post to
root URL and notice
that I'm making use of an ES six template string here.
So I've got the backticks instead
of normal quotes, you know, using backticks here.
That's the character to the left
of the one on your keyboard.
A JavaScript variable that I'm gonna wrap inside
of curly braces and the dollar sign.
And then I'll put
on the rest of the string, which is slash signin.
Then as a second argument, I'm gonna post,
or I'm gonna place, in here the data
that I want to post to this endpoint
which is gonna be the email and the password.
Notice that I'm using the curly braces here.
That means that I'm gonna form an object
that looks something like email, email
and password, password.
Again, another little bit of ES six syntax
we're making use of because the key and the value
are the same exact name.
Email, email, password, password.
So another little ES six shortcut.
Okay, so here's our action creator.
It's looking pretty good.
It's making the post request, everyone's happy.
One last little thing we need to do, we need to
make sure that our actual component, the sign-in component
calls the action creator whenever the form is submitted.
So one last step, let's do it.
I know it's been a pretty long section, so let's get to it.
Back inside the sign-in component.
We've done this process many times before.
We'll import star as actions from
up one up one actions.
And then just another friendly reminder,
the Redux form helper here behaves exactly the same way
as the connect helper, which we've used many times before.
The connect helper has the first argument
of map state to props, which we're not using just yet.
And the second argument, or in this case, the third argument
with Redux form, we pass in the actions variable
and then we get access to all
of our different actions on props inside the component.
So the very last step here, and I know it's been a lot
is we can call this dot props dot signinUser.
And into this we will pass our email and password.
And remember, signinUser expects an object
with email and password, and that's why again,
we're using the curly braces here.
Okay, so lot of code, lot of prep, you know
a lot of different stuff to go to.
Again, I did not say authentication was gonna be easy.
In fact, I said it was gonna be hard.
Let's give this a quick shot in the browser
see how it does, and then move on to the next section.
I'm gonna refresh the page.
I'm gonna put in an email and a password that I know work.
So this is an account that I've already created.
I've got my network request tab open over here
inside a Chrome debugger.
I'm gonna sign in and, uh oh, it looks
like we got a big error here,
so this is pretty interesting.
Let's check out what the error says.
The error says cannot load so and so,
something, something something,
no 'Access-Control-Allow-Origin-Header'
is present on the requested resource.
So, we have a little bit of troubleshooting to do here
and this is one of the really interesting things
around the kind of server setup that we've done
that is very important to be very aware of.
So let's tackle this error inside the next section.
I'll see you there.