Instructor: In the last section,
we wired up the signup form to our application.
Before we can add any inputs to this thing,
we need to make sure that we have Redux wired up
to our application so that we can hook up Redux form
to automatically handle the form elements.
So in this section,
we're gonna set up Redux inside of our app.
To get started, I'll flip back over to my code editor,
and we're going to create a new directory
to house all the different reducers
that we're going to eventually make.
So inside of my src directory,
I'll make a new folder called reducers.
And then inside there,
I'm gonna make a new file of index.js.
And this is going to house eventually
our combined reducers call.
Let's at least set that up right now.
And then we'll have a quick discussion
about the different reducers that we're going to need.
So at the top I will import combineReducers from redux,
and then I will do an export default combineReducers
and pass an object in.
Okay, so let's now talk about the different reducers
that we're probably going to need to hook up to this thing.
So in total, I think that our reducer situation
is gonna be really, really straightforward.
Out of everything we've shown inside the app so far,
I think that we only need one general reducer,
and that reducer will probably have
two properties associated with it.
The first one is gonna be a property of authenticated,
and its type will be a string.
Now the property name right here of authenticated
might make it really seem
like this should be a boolean, true or false.
Like, are they authenticated?
Yes, no, true, or false.
But we're going to use a little bit of a trickier.
Remember, all of our authentication is tied
to the presence of that JSON web token.
So for the authenticated property right here,
we are going to assign our JSON web token
to this authenticated thing.
If a JSON web token has been assigned to authenticate,
then we're going to assume that the user is signed in.
But if there is no authenticated token assigned here,
if it's an empty string
and there's no token there whatsoever,
we're going to assume that the user is not signed in.
So calling this property authenticated
kind of does make sense.
The presence of a string says,
"Yes, you are signed in 'cause here's the token."
And if the string is empty, which is interpreted
in JavaScript as being a falsy value,
and that's going to indicate that no, you are not signed in.
Now the other property that we're gonna have in here
is the error property.
So on our backend server we have put together error handling
for when the user has tried to sign up
with a email already in use or sign in
with an email and password combination that is invalid.
And so we're going to eventually want to communicate
failed sign in and sign up attempts to the user.
That error message that we're gonna show to them
will be carried by this error property.
So in total, I think we really just need this auth reducer,
and it's gonna have these two properties
which are gonna handle just about everything
about authentication inside of our app.
So let's make this reducer.
I'm gonna get started
by creating a new file inside my reducers directory.
And I'm gonna call it simply auth.
This is our auth reducer.
And inside of here, we can put together
some of our typical boiler plate for a reducer.
I'll do an export default function
with some initial state and our action.
The initial state or the default value
for state that we assign to this thing
will be an empty object.
So an empty object indicating, by default,
the user is not authenticated
because authenticated will be undefined
and there should be, by default, no error message.
Now, one way that we can really make it clear
to other engineers about what properties
they should expect to be inside of our project,
we might instead of doing an empty object right here,
we could always define a initial state object
above this function declaration.
Let's try that out just to see what it might look like.
So this would be a slightly different approach
that would definitely help out other engineers
who are looking at the code inside this
without any real idea of what's going on.
So we could do an INITIAL_STATE object,
which is in all capitals
'cause it's intended to be a constant variable
or truly constant and really truly unchanging.
And then we can give it authenticated
and by default, that will be an empty string.
And then the error message,
and we're gonna call this errorMessage rather
than just error
because the word simply error is sometimes interpreted
as being a keyword in JavaScript.
So we're just gonna be really clear here
and say this is an errorMessage
that we're trying to communicate to our user.
And this will be an empty string as well by default.
So now rather than assigning
an empty object to our state by default,
we can assign INITIAL_STATE.
Okay, so we don't have any action creators,
we have no types or anything like that right now.
So by default, we'll just have this reducer
return the state object and do nothing else.
So that looks pretty good.
We'll flip back over to our combinedReducers file now,
we'll import the auth reducer, from auth,
and we can wire it up to the combineReducer call.
Now, we could do like auth auth, like so,
but we'll instead make use of ES2015 syntax
and leave it simply as auth.
Okay, I think that's it for combineReducers.
Now, the very last thing
that we'll take care of inside this section, just to get
through this very common Redux set up very quickly,
we will open up our root index.js file,
and let's import our createStore helper from Redux.
We'll get our provider tag from react-redux,
and wire it up to our entire application.
So at the top by all of our library imports,
we'll grab the Provider tag from react-redux
and we can get createStore from redux.
Then we'll place our Provider tag to wrap the BrowserRouter.
And we'll make sure I get the closing tag on here as well.
And to the Provider, we can pass our store prop.
So we'll call createStore.
We'll pass in our reducers
and a default state object of empty object.
And then one quick thing that we can't forget to do
is to import the reducers.
So by all of our code imports,
not the library ones, but by our imports,
so we'll put it right here at the top,
we'll import our reducers
from the reducers directory, like so.
Okay, I think that's it.
I think that is a lot of Redux code inside of one section.
Let's very quickly flip back over the browser
and make sure that everything is still working.
So back over here, we get the refresh.
And it looks like we're still good to go.
So we can still navigate around to these two pages.
Redux is running behind the scenes.
It's not really doing anything just yet,
but we certainly can now add in Redux form
and continue working on the signup form.
So quick break, and I'll see you in just a minute.