-: In the last section we added in React Router.
Remember, React Router consists of a router component,
and then nested route components within it.
We also declared the history object,
which tells React Router
how it should work with the current URL and the browser.
We also defined two possible routes that the user can visit.
They can either hit the root route
which will always show app,
or they could hit the resources route,
which will show our resources component.
Now, at this point in time,
we haven't added anything around authentication
into our component just yet, or our entire application.
So that's what we're gonna focus on inside of this section.
The goal is to say,
whenever a user clicks "sign in" at the top,
they should instantly be turned
into a kind of signed-in state.
Now again, we're going to assume
that there's really no username here.
There's no username, no password.
Just by clicking the login button or the sign-in button
they should instantly flip into a signed in state.
So here's how we're gonna accomplish that.
Inside of our header, we're gonna say
that whenever a user clicks the sign-in button
we should call an action creator.
And that action creator should just do a Boolean flip
on the user's current authentication state.
So if they're currently logged in, flip them to logged out.
If they're currently logged out, flip them to logged in.
In practice, this is gonna be
a pretty simple little component,
or bit of functionality, that we add in here.
All right, so I think that the best place to start off
is with our action creator inside of the actions directory.
We've got our action creator file, index.js,
but we don't have a types file yet.
So let's go ahead and start with the types.
Inside of my src-actions directory,
I'm gonna make a new file called types.js,
and then inside of this we'll define
our single type for our application.
Our only type is gonna be export const CHANGE_AUTH.
So we'll say whenever an action with CHANGE_AUTH comes by,
just flip the current authentication status
from true to false or from false to true,
just the opposite of whatever it currently is.
With our type in place,
we'll now go into our src- actions index file
and make our action creator.
First, we'll import our type at the top.
We'll import our CHANGE_AUTH type,
and then we will export one function called authenticate.
And on authenticate, we're going to assume
that authenticate is going to be called
with whether or not the user should now
be logged in or logged out.
So we will pass in what will be a Boolean here,
and we'll call it isLoggedIn.
Whenever action creator gets called,
we'll return an action whose type will be CHANGE_AUTH,
and the payload will be isLoggedIn.
Now with our action creator complete,
we can get started on our reducer.
So this is gonna be a very straightforward,
very simple reducer whose really only job
is going to be to respond to this single action type
that we have right here.
I'm gonna make a new reducer called authentication,
and inside this reducer we'll first import
our type that we just created.
We'll import CHANGE_AUTH.
I also accidentally only called it authentication, the file.
I'm gonna add on the extension really quick.
There we go.
So we're gonna import this type from up into actions/types,
and then we'll define the reducer itself.
So we'll export default function.
Remember, the first argument to our reducer is state,
and we always need to default our state
to a reasonable value.
So we'll say that by default, our user is not logged in.
So the authentication reducer
is just gonna return a Boolean:
whether or not the user is currently logged in.
It's either gonna be true or false,
and by default, they're gonna start off
as being not logged in.
Our second argument is our action,
and then we'll do our switch over the action's type.
In the case that the action's type is CHANGE_AUTH,
we're just gonna return action.payload.
So this is where that real simplicity is coming in here.
The action creator is just gonna return
whether or not the user should now be logged in.
So if they are, if we get an action creator called
that spawns an action where the payload is true,
then boom, the user is currently logged in.
If action.payload is false, conversely,
the user will suddenly be logged out.
And by default we will return our state.
Now, just one more step.
We need to make sure that this authentication reducer
is wired up to our combineReducers call.
So inside of index.js, inside of our reducers file,
we'll import authenticationReducer from authentication.
And we'll remove the kind of dummy reducer
that we have in here right now,
and we'll call this authenticated,
it's coming from authenticationReducer.
All right, and so that's really all the wiring up
that we need to do inside of our application
on the Redux side.
Again, we added one reducer whose sole purpose
was to return a Boolean representing either
whether or not the user is currently logged in,
and this Boolean will be available
on the state.authenticated piece of state.
We really sped through the implementation
of this action creator, its type
and its reducer inside the section.
Again, I'm really making the assumption
that you are familiar and comfortable
with Redux at this point in time.
If anything that we did here is unclear,
always feel free to drop me an email.
Say, "Hey, I didn't get any of the Redux stuff
"that was happening here."
And I can help you walk through it at any point in time.
So with our reducer, action creator,
and action all put together,
let's continue inside the next section
where we'll hook up our header
and make sure that the button can communicate
whether or not the user is currently signed in.
I'll see you there.