-: In the last section we imported the
connect helper to our signup component file.
But down at the bottom here,
we noticed that we're going to have to
wire up both the redux form helper
and the connect function at the same time
which usually ends up with some really weird syntax.
So to help us with this,
we're going to import at the top of the file
a helper from the redux Library.
So I'm gonna add in import
compose from redux like so.
This composed function allows us to write
out multiple higher order components,
with a much better syntax than
if we try to like manually chain them all together
with a bunch of sets of parentheses.
So let's go back down to the bottom of the file
and we're gonna try making use of this compose helper.
Okay, so down here we're gonna write
out the code that's going to make use
of compose and we'll talk about what it's doing for us.
So after export default,
I'm gonna first begin by putting in
a couple new line characters,
and then I'm going to export default compose.
I'm gonna write out one set of parentheses
and put a new line in there.
And then I'll put a second set of parentheses after that
and I'll pass in our signup component.
Now, inside of the body of compose right here,
we're gonna list out all of the
different higher order components that we
want to have be applied to signup.
So as the first argument I'm going to add
in the connect helper.
I'll call connect
We're gonna add in a argument to it
of our action creators in just a moment.
But for right now,
let's just put a comma in.
And then as the second argument to compose,
I'll put in the other higher order component
that I want to apply to sign up.
So the other higher order component that I want to apply
is just the redux form helper.
So I'm gonna cut that and I'll put it in
as a second argument like so.
So notice that signup is not at the end.
There is no signup over here.
It's just the redux form helper.
And then finally,
I'm gonna delete that leftover signup call at the bottom.
Okay.
So what compose does for us is it allows us to
apply multiple higher order components to a single component
with a much more attractive syntax.
So inside of compose,
we can pass in as many higher order
components as we wish,
and they will all be applied in series
to whatever component we pass in
at the last call down here.
So composed does nothing special whatsoever.
Besides allowing us to avoid writing out a whole bunch
of different sets of parentheses.
That's all.
Nothing else is happening with compose.
Okay, so now that we understand what's going on with compose
we can finish up with the connect helper right here.
So right now we are trying to apply our action creators
to the signup component.
So as the first argument to connect,
I'll pass a null because there currently
are no pieces of state that we want
to wire up to this thing.
And then as a second argument,
I'll pass in my actions object.
Now, when I save this,
you'll notice that again my code jumps
thanks to my code formatter.
I'll leave it on the screen here just for one more moment
just so you can see the entire statement.
And then I'm gonna save the file.
So now we can go back up to our on submit callback method
and inside this thing,
rather than trying to console log anything,
we're gonna call the signup action creator
that is now available inside of our component.
So inside of on submit,
I'll call this dot props dot signup
and I'll pass in the entire form props object.
Okay, so now I think we've got more or less
the entire chain all the way from form submission,
to attempting to create a new account.
So I'm gonna save this file,
and we'll very quickly flip back over to our browser
and test this out.
So at this point,
all I really expect to see is a request
going over to our backend api
that will attempt to create a new account.
So I'm gonna flip back over to my browser.
I'm gonna open up my Chrome inspector,
and I'm gonna go to the network tab.
So again, we don't have really any indication
inside of our application itself
that we have successfully signed up.
All I wanna see is a request
that goes to our backend api.
And I wanna make sure that the request has the correct
email and password that's going to attempt to actually
create a new account for us.
So once I've got the network request log open,
I'm gonna clear all the requests that have been made,
and I'm going to enter an email and a password.
Now remember, our backend api makes sure
that all emails are unique when you try to sign up.
So when we were putting the server back together,
if you used an email already,
and you try to reuse that now,
you're probably gonna see an error message.
So make sure that you put in
a unique email and password right now,
so that you know that you're not gonna get an error
due to that email being in use.
So my email, I'll do like phone at phone dot com,
which I've definitely never used before.
And then for a password,
I'll do simply password
and then I'll click sign up
and we should see our request be issued.
Now when the request is issued,
I could definitely see a request over to
local host thirty ninety slash signup right here,
But you'll notice that down inside of my console,
I've got a pretty nasty air message.
So this air message right here is to be expected.
If you're seeing this air message,
totally fine.
Let's take a pause right in here.
We're gonna come back in the next section
and we're gonna talk about exactly
why we're seeing this air message,
and how we can fix it.
So quick break and I'll see you in just a moment.