Instructor: In the last section, we added in
our render buttons method right here
to the app component.
So we've got these two buttons that are being displayed
on the screen.
If a user clicks on either one,
we presumably want to log the user in
or log them out of our application.
To authenticate or deauthenticate a user,
we had created that action creator
called changeAuth inside of our actions index.js file.
So inside of here at the very bottom,
you'll recall we put this action creator
together just a moment ago.
We can call changeAuth with either true or false
and that will flip the Boolean recording whether
or not the user is authenticated inside of our application.
So all we have to do is import this changeAuth
action creator into our app file
and then wire it up to the component.
So I'm gonna flip back over to the app component.
At the top I will import star as actions from actions
and then I'll take all of our action creators and wire them
up to the connect function at the bottom of the file.
So at the bottom of the file, here's my connect function
and as the second argument I'll pass in actions like so.
So now we can go back up to that render button method
and we're gonna add a click event handler
to each of these buttons.
If a user clicks on this sign out button,
we'll probably want to call that changeAuth action creator
with a value of false to indicate that we want
to change the user's authentication status to false
or not logged in.
So for the first button, I'm gonna add an on click handler.
Whenever a user clicks on this thing,
we're gonna have an arrow function
that will call this.props.changeAuth with a value of false.
And then I'm going to do a little bit of reformatting here
just so you can see this entire line of code.
Cause right now it's a little bit unclear.
And there we go. So a lot better.
Now when I save this file, my code formatter
might recollapse this thing again,
but at least for right now you can get a better sense
of what's going on.
So now that we've got the sign out button put together
we'll repeat that same process for this sign in as well.
If a user clicks on the sign button or sign in,
we probably want to call that changeAuth action creator
with a value of true to indicate that
the user should be authenticated.
So I'm gonna do the same little bit of reformatting
for this button tag as well.
Like so, that's good.
And then I'll add on the on click handler.
So I'll say on click, run the arrow function to
call this.props.changeAuth with true.
Now I'm gonna save that here.
Let me undo that, just so you can see it
before I actually save this
and my code formatter just butchers it.
So just to make sure you see what's going on here.
So for sign out, we want to call changeAuth with false.
If we wanna sign in, we want to call changeAuth with true.
All right, now we'll save this thing
and now we can go back over to our browser
and test this out.
So back over here, I'll do a quick refresh.
Now I should be able to click on sign in
and see the button toggle over to sign out.
And then of course I can click on that
and it goes back to sign in.
So now we've got that simple Boolean inside of our reducer
or our redux state that says whether or not
our user is authenticated.
So that's pretty much it for the actual kind of react router
and redux side of things.
Now we get to continue in the next section
and figure out how we actually put together
a higher order component.
So everything up to this point was just preparation work.
Now we get to really dive into the fun stuff.
So quick break and we'll take care of that
in the next section.