Narrator: In the last section
we put together our signup action creator
or at least some scaffolding for it.
And we also spoke a little bit about Redux Thunk.
Redux Thunk is one
of those topics that we're going to be working
with throughout the rest of this application.
So we'll get to see a couple
of different action creators that make use of it
inside this file.
Let's now continue by taking our email
and password that are provided to the signup action creator
and we're going to attempt to post them
over to our backend API.
Now, just so you know, I still have my backend API running
on Port 30 90 right here.
So if you're not running your API,
you're gonna wanna make sure
that you open up a second terminal window,
change over to that server directory and run
that NPM run dev script to make sure
that your server is still running on Port 30 90.
So, now back over inside of my Action Creator file
we're going to import Axios.
We're gonna take the email and password
and we're gonna try to post it over to that backend API.
To get started, I will import Axios at the top
and then, inside my Action creator,
I'm going to call Axios dot post
cuz we're trying to post some data.
And then we're going to make a request to http
colon slash slash
local host 30 90
slash signup.
And as a second argument, we're gonna pass the email
and password inside of a single object.
So I'll add in here email and password and notice
that we're making use of ES 2015 syntax here to
automatically get email and password expanded out to
email email and password password like so.
Now you will notice that we are just de structuring email
and password out of our props right here
or out of the arguments the action creator
and then just kind of restructuring them into a new object.
So one refactor that we're gonna do right now
just to make this function a little bit more clear
we're going to just take the first argument right here.
And rather than trying to de structure
out email and password, we'll carry through that name
of form props to say these are the properties
that the user's trying to sign up with out of our form.
So now we don't have to restructure that into a new object.
We can instead just write form props, like so.
Okay, so that looks good.
Now you'll notice that we are not trying to chain
onto this request with a promise or anything like that.
For right now,
I want to just try calling the signup action creator
and seeing if we can actually sign up successfully.
So we're not gonna try to retrieve the JSON web token
that we get back or anything like that.
We're not gonna dispatch an action
I just want to call that endpoint
and pass in the email and password.
So to call this signup action creator we just added
we need to make sure that we wired up to our signup form.
I'm gonna flip back over to my signup dot js component.
So here's signup right here and we're gonna wire up
that action creator to this component.
To do so at the top I will import the Connect Helper
from react-redux and I will import star as actions from
let's see, up one directory and then actions folder.
So star is actions from up one directory, actions.
And you know what actually, my mistake
we actually have two directories here.
So it's going to be dot dot slash, dot dot slash
to go into the components folder and then
up to SRC and then into actions.
So now we can go down to the bottom of the file
and wire up the action creator.
So down at the bottom.
I'll find the export default statement
that we have right now with the redux form helper.
So this is kind of a little bit awkward right here.
We need to wire up redux form along with the connect helper
and they both have that really strange syntax
where we call redux form or connect.
And then we have the second set of parentheses for signup.
Now, we can definitely write out, as it stands right now
we can add in the connect helper without trying to
use any other helper methods or anything like that.
The problem is that the syntax
for it is gonna look a little bit strange.
So rather than trying to like fit in the connect helper here
and end up with a whole big mess of parentheses
we're going to use a helper function that is provided
to us by redux itself.
That's going to allow us to write out the signup component
with the redux form function and the connect function
with a little bit easier to read syntax.
So let's take a quick pause right here.
We're gonna continue the next section and we'll add
in another little helper that's gonna allow us to write
out all these higher order components
of redux form and connect.
Without adding in 20 dozen different sets of parentheses.
So quick break and I'll see you in just a minute.