In this video we're going to do a quick little refactor to our author's douceur.
You want our two action creators that we just put together.
So if your code is not working right now and if it feels like clicking on that button does absolutely
nothing at all.
You might have a very common little bug throughout this course.
We've been defining actions that have a type property.
And in every case we've always assigned a string directly to that type property when there's a extremely
common error that tons of people make including myself when they're first getting started with redux.
Remember the type property right here whatever string we put in it is very important that we put the
exact string inside of the Type property right here.
And the exact same type spelling or the exact same spelling of that string inside of our case statement
inside very douceur.
It is incredibly common for people to accidentally make a little typo inside that string.
So maybe they say sig in as opposed to sign in.
So if you currently are having a problem inside of your program where it seems like you're clicking
on a button does nothing at all double check those strings for the cases.
And then double check the strings inside of your action creators as well.
It's incredibly possible that you might have made a little typo between the two.
Now I told you at the end the last video that we were going to do a little Reflektor here so I'm going
to show you a little technique that we can use to make sure that we don't make any typos in transcription
between our reducers and our action creators.
So to do this refactor and make sure we don't accidentally make any typos are going to create a new
file inside my actions directory and I'm going to call it types.
J.S. then inside of here we're going to define all of the different types that are used inside of our
action creators and producers.
I'll do so by writing out export Konst sign in equals the string sign in and then I'll do the same thing
for sign out as well.
All right so what are we doing here.
Well essentially inside of one single file we are defining all of the strings that can be used inside
of our action creators in our reducers.
So inside of all the action creators producers we are no longer going to refer to plain strings.
Instead we will import these action types.
These variables of sign in and sign out these variables still reference strings.
But the benefit to using variables right here is that if we ever accidently make a typo in the name
of a variable we're going to very quickly see an error message that says like you know if we type inside
of our douceur Let's go back over there right now if we accidentally reference a variable inside of
fear of something like sign in and then leave off like the end or something like that.
We will very quickly see an error message that says something like unknown variable sig in and that
essentially is assigned to you the developer that you probably made a typo around one of your action
types.
So in reality just about nothing here is changing.
We're still using strings to coordinate our types but those strings are being assigned to variables
just because it is easier to find errors when we make spelling or make mistakes in the spelling of a
variable name.
Now just creating this type's file does absolutely nothing.
We have to actually use these variables inside of our reducers interaction creators so to make use of
these two variables right here.
I'm going to first change into my actions index j as file and then at the top I will import sign in
and sign out from the type's file and then for my two types are my two action creatures inside of here
I will remove the plain string and replace it with sign in.
Now I'll do the same thing for sign out down here as well.
Sign out so now we can do the same process inside of our three douceur I can my authorized use or at
the very top I will import sign in and sign out from up one directory actions types
and then I will replace the string right here with sign in and the string right here with sign out.
So again we're still using strings to coordinate this.
The only difference is that these strings are now assigned to variables.
So if you make a typo in the variable name we will see an error message.
Now I'm going to save both files and I'll flip back over the browser and I'll do a quick little test.
So I clicked sign in with Google and I'm kicked into my waterflow.
So I still see the button change successfully I can click sign out.
And that button changes back to the initial state.
All right.
So looks like everything still works the way it did before.
But now if I accidentally make a typo here let's just get a quick idea of what that would look like.
So if I accidentally misspell that type name right there and I go with sin because I just committed
a sin in misspelling the action type I can say this and then I will very quickly get a nice error message
right here that tells me hey I just did something wrong around my author reducer I probably misspelt
a type so I probably need to go and fix that.
And so I wait.
Go back over.
I would see the line that it was talking about right here and I would say oh OK I made a mistake I made
a misspelling or a typo inside of my type.
So I'll just update it to the correct spelling like so I can save this.
And the error message goes away.
Awesome.
All right so moving forward we're going to be using this kind of type system throughout the rest of
all this application and any other apps so we start to build.
So it's something that we're going to do a lot moving forward just to help us catch possible typos.
All right let's take a quick pause right here.
There's one last thing I want to do around our producer and then we're going to start moving on to our
next big feature.
So quick break and I'll see you in just a minute.