-: In the last section we added two routes
to our app.js file.
At this point, we've got these two routes inside of here,
and we can navigate between them
by manually changing the URL inside of our browser.
There's a couple of different ways
we can take this application from here.
We can either start working
on the idea of authentication inside of our app,
which is going to involve creating another reducer,
or we can start putting together some of the links
inside the app component that are going to display
at the very top, and allow the user to navigate
between all the different routes of our application.
I think maybe we should tackle the Redux side very quickly
'cause that's gonna be a pretty straightforward side.
All right, so as a quick reminder, this idea
of authentication is gonna be a simple boolean
that is stored inside of our Redux store.
There's no email, there's no password, nothing like that.
If a user clicks on sign in right here, poof,
they're going to be magically authenticated
by us just flipping some flag inside
of our Redux store from false to true.
That's it.
So with that mind, we'll first get started
by creating a reducer to store
whether or not a user is signed in.
So inside my reducer directory
I'm gonna make a new file called auth.js.
This is short for authentication.
Then inside of here we'll put together some boiler plate
for a normal reducer.
So I'll say export default function, state, action,
and then we'll have our switch statement on action.type.
We'll have our default case where we just return our state,
and that's pretty much it for the boiler plate.
Now we need to think about the state
that this reducer is going to store,
or the type of data that it's going to store.
So again, the auth. reducer's purpose is really
just to store a boolean value,
true meaning that the user is logged in false
meaning the user is not logged in.
So for our default state right here, I'm gonna say
that we're going to default the value to be false.
So by default, a user is not signed into our application.
Okay, so reducers is not too bad here.
We're gonna come back to this thing
in just a second, and add in a case to the switch statement.
But for now, let's flip back over
to our actions directory and we'll make a new type,
and a new action creator that will allow a user
to toggle, or allow you and I for that matter,
to toggle whether or not a user is signed in.
So in inside my types.js file
I'll first create a new type called export,
well, not called export,
but we'll call it change_auth like so.
So the idea here is that anytime we see an action
with type change_auth, we're going to try to flip the value
of that authentication field.
Now that we've got the type, we'll open up
our index.js file in the actions directory,
and make a new action creator as well.
At the very top we'll import that type that we just created.
So change_auth like so,
and then down at the bottom
we'll make the action creator itself.
So we'll export a function called
about just simply changeAuth.
The action creator itself is not going to really know
whether, or not we are trying to flip the user to
be true, logged in or false, not logged in.
So we'll just rely upon changeAuth right here
receiving some argument that tells us whether,
or not we are trying to sign in or not.
So we will receive an argument right here called something
like isLoggedIn, to indicate whether,
or not the user should be logged in to the application,
and then inside the Action creator itself we'll return
in action with type change_auth.
That's the name, right?
Yep. Change_auth, and a payload property
of isLoggedIn.
So now that we've got this action creator put together,
and our type, let's go back over
to the reducer very quickly, and we can use this payload
of whether or not the user should be logged in
to flip that reducer's understanding of
whether or not the user is actually logged in.
That was an awkward way of putting that,
but I think you know what I'm getting at here.
So we're gonna go back over to our auth.js file.
At the top, we will import that new type we just created,
change_auth from actions types.
Then we'll add in our case of change_auth,
and whatever comes across on that action.payload
is what we're going to return from this reducer.
So I will return action.payload.
So now when we call that action creator
it's gonna be critical that we pass
in either true or false to reflect
whether or not our user should be signed in.
All right, I think that's pretty much it
for the Redux side, this application.
So let's take a quick pause right here.
We'll come back in the next section,
and start wiring this new action creator,
and the reducer up to the rest of our app.