Speaker: So, we've now got an action creator
to handle authentication,
and we've got a reducer to act on that action creator.
Now, I have said several times that we're gonna kind of
push right through the redux stuff really quickly,
but just to make sure,
in case I was going too quickly on what we're doing,
I want to do a quick review
on the topic of the action creators and the reducer,
and just kind of their whole flow within our system.
So, I'm gonna pull another diagram on the screen
to explain the entire process.
So, this is a cycle or a diagram
of a action going through an action creator,
and then a reducer, and then updating our state.
So, this is all what's going on behind the scenes
or what we want to have happened
when a user clicks on the Sign In button.
So, when a user clicks on the Sign In button,
we want to call our action creator called Authenticate
to authenticate our user.
The action creator is going to return an action
that includes a payload of true and a type of CHANGE_AUTH.
This action is gonna flow into our authentication reducer.
And the authentication reducer is just going to return
whatever action.payload is.
And so, the real key here of figuring out
whether or not the user is logged in,
is the argument that we pass to our action creator.
Once we call our action creator,
and the action flows to the reducer,
the reducer is going to produce a new application state,
which assuming that we pass true to the action creator,
will now be authenticated is true.
This new piece of state then flows into our application
causing our application to rerender.
So, our job now is to make sure
that the button that is displayed,
and the action creator that is associated with it
is correct, given whether or not the user is authenticated.
So, with that last part,
I wanna pull another diagram on screen
just to bring a little bit more clarity to it.
So, this is another diagram that explains
what needs to happen,
or what we need to achieve in our application
when our authentication state is false or true.
So, given false or true, it's really just, you know,
the opposite.
We're gonna do the opposite case.
So, if a user is not authenticated,
we want to be able to sign our user in,
which means we want to show a button that says Sign In.
If the user clicks on that button,
we want to call our authenticate action creator with true.
Then, in the total opposite case,
if the user is already authenticated,
so authenticated is true,
then the button that we show should say
something effect of, "Hey, click here to log out".
And when the user clicks it,
we should call our action creator with false,
meaning change the user's current authentication state
to false or logged out.
So with that in mind, should be a little bit easier
to put put our action creator together.
I'm gonna open up our header.js file.
Now, we need to do a couple things in here.
First, we need to get access
to the authenticated piece of state,
and number two,
we need to also wire up our action creator,
and call the action creator
whenever the user clicks on a button.
So, let's wire up this component to be a container
so it can get access to redux state.
At the top, I'm going to import
connect from react
redux,
and I'm also going to import all of our action creators
with import
star
as actions
from
actions.
So, now at the bottom of our file,
we're gonna use the connect helper
to promote header into a container.
We're going to use connect, place one set of parens,
and then wrap header inside another set.
Next, we'll define the function map state to props
that we're gonna pass to connect.
So, function, map, state to props.
This is gonna get called with our application state
and we want to return an object with key authenticated.
And this piece of state is gonna come from state dot,
and remember this,
the property that we're gonna refer to right here
is produced by our combined reducer's call
inside the index file.
So, let's double check what it is really quick.
So, it's authenticated, that's the key that we care about.
So, I'm gonna flip back over to header
and we'll do state.authenticated.
Now, this object is gonna show up as props
inside of our header.
We'll place our map state to props inside the connect.
And now, we can refer to
this.props.authenticated
inside of our component.
So now, the key here is that we wanna do something different
based on whether or not the user is currently authenticated.
So, if the user is authenticated,
we'll say, if the user is authenticated,
then I want to show a button that will allow them
to sign out of the application.
So, we'll return a button
that says simply
Sign Out.
So, this is step one.
This is to make sure that we're getting
the correct information on the screen,
or the correct text on the screen
based on whether or not the user is currently signed in.
Step two, is to make sure that when a user
clicks on either button,
we change their authentication state.
So, we wanna change whether or not
they're currently authenticated.
To do this, we'll just add a click event handler
on each of the buttons.
So, if we want the user to be able to sign out,
we'll say on click,
and then we'll pass this, a fat arrow function,
this dot props dot,
and now, the props object
that we're gonna refer to right here
is gonna be our action creator,
which we imported up at the top,
and we need to import,
or we need to make use of down on connect.
The name of that action creator
can be found in our actions dot index.js file.
And the action creator's name was simply authenticate.
So, we'll say this.props.authenticate.
And, if the user is clicking on the button,
we want to change the authentication,
we want them to sign out.
That means we need to pass false to authenticate,
meaning change the current piece of authentication state
to false.
No, they're not logged in.
So, false.
And then, we'll do the same thing,
another fat arrow function,
this.props.authenticate,
but this time true for the Sign In case.
Now, the last step is just make sure that our header class,
our header component has access to the action creator.
And to do that, we need to make sure we pass these actions
into the connect helper as the second argument.
So, go down to the bottom,
and as a second argument will add on, excuse me, actions.
All right, let's save this file.
And I think we're at a pretty good spot
to test in the browser.
So, we're gonna flip over to the browser.
We'll refresh, I click Sign In, and it turns into Sign Out.
And so, you can see very simply,
all we're doing here is toggling our authentication state.
So, this is looking pretty good.
This is pretty much part one of our application.
We've got the ability to say whether or not
the user is currently authenticated.
That means the only thing we need to do now
is build our higher order component.
And based on our higher order component,
we'll have it automatically kick our users
back to the home route,
if they try to visit the resources route
when they are not signed in.
So, let's start tackling that inside the next section.