-: We've made some good progress on our signup form
but it still has some goofy behavior.
Let me show you really quick.
I'm gonna flip back over to my application
and I'm gonna sign up for a new account.
I'll use an email of browser@browser.com
and a password and then I'll sign in.
Now if I go to my network tab
I can very plainly see that that request just succeeded.
But if I click on that button again
I get an error message and if I look at that request
it tells me very plainly that the email is in use.
So we need to make sure
that if the request to sign up fails,
we communicate that error back over to the user
and tell them, "Hey, something just went wrong.
You probably signed up for an account
with an email that's already been used."
Now in order to get that error message
you'll recall that inside of our auth reducer
we said that we would have that error
or we called it error message piece of state.
So all we have to do is inside of our signup action creator
check to see if that request fails.
And if it does fail we'll dispatch an action
that tells our reducer,
"Hey, something just went wrong."
So to get started, I'll open up my signup action creator.
When we're using the async await syntax
we can catch errors that are thrown
from our request right here
by wrapping it with a try catch statement.
So around our request, I'll put a try block.
So there's my opening curly brace
and then my closing curly brace.
And then I'll add on the catch case.
So now right here, this code will run if anything goes wrong
with our request to sign up for a new account.
For us we probably want to dispatch an action
with some type of something like auth error
and we'll give a payload of some error message
to show to our user.
So if we get down here into that catch case
I will dispatch an action with type auth error
and a payload of something like email,
let's do it in normal caps, email in use.
Okay, so now if anything goes wrong with our request
to sign up for a new account,
we will dispatch an action of type auth error.
Now we have not yet actually defined this type
so let's make sure that we very quickly do that.
I'm gonna add that type to the import statement at the top.
And then I will flip over to my types file
and define it inside there as well.
So over inside my types file,
I'll do export const auth error.
And then finally I will flip back over to my auth reducer
and make sure that we watch for the type auth error.
So inside my reducer file,
I will grab the type import at the top, auth error.
And then finally we can add a new case to our reducer.
So inside the reducer itself we'll do case auth error.
And if that happens, we'll return our state object
with an error message property of action dot payload.
Cool, so now all we have to do is go back over
to our signup component and make sure
that we pull this error message piece of state
into the component itself.
So inside of my signup dot js file
I'll go down to the bottom of the file.
Right now we are not pulling any
pieces of state out of redux.
Here's our empty connect map state to props argument.
So I will add a map state to props function.
It will receive our state object
and we will return an error message property
from state dot auth
dot error message.
And then I will make sure that I pass
that function as the first argument into connect.
So map state to props.
Okay, so that looks pretty good.
Now the very last thing we have to do is make sure
that if we are given this
error message property inside of our component,
we try to show it inside the form.
So how about just right on top of our button right here
I'll add on a div that will show the result
of this dot props dot error message.
Okay, so now we're going to print out
the error message inside the form.
I'm gonna flip back over to the browser
and we'll test this out really quickly.
So if I put in desk@desk.com
or any email that you've used before.
I think actually I used browser.
I'll put my password in
and then if I sign up you'll notice
that we get the error message there.
But you'll also notice that our div
with that error message did not actually show up.
So chances are I just made
a little typo somewhere along the way here.
Let's take a quick pause right now.
I'll find that typo
and then we'll come back in the next section
and figure out exactly what went wrong.
So quick break and I'll see you in just a minute.