Instructor: Now that we have the ability to persist
our login state we should probably make sure
that users can actually log out as well.
Remember, if a user goes to the Signout link right here
and they visit the Signout route, we're going to
want to somehow log the user out of our application.
Logging out a user is gonna be a two step process.
We're going to want to make sure that we clear that
local storage data that stores our token
and we're going to want to make sure
that we also flip that authenticated piece
of state over to either false or empty string as well.
So let's get to it.
In this section we'll create a new component to
show anytime a user goes to the sign our route.
Remember that we had said
that we want that component to just show a simple message
to the user of something like, Hey, sorry to see you go.
Okay. So to get started
I will open up my components directory
and inside my off folder
I'm gonna make a new component called Signout.js
Then inside of here, I'm gonna create a class
based component, 'cause we're definitely going to
want to make advantage of the lifecycle methods
that class based components have access to.
So I will import React and Component from react
Then I'll define my class signout which extends component.
We'll take care of the render method
'cause I think that's gonna be really easy.
I just wanna return a div that says something like
Sorry to see you go.
And then I'll export default that at the bottom.
I'll then flip over to my index. js file
where I will set up a new route mapping
for the Signout component.
So I will import Signout from components signout
oops that's components off Signout
and then I can make a new route mapping
by all my other routes.
So I'll say route with a path of Signout.
We should show the component Signout.
All right, so that's not bad.
Now we could test that out in the browser, but I'm sure
what we just put together is gonna work just fine.
So let's instead open up our actions index.js file where
we will create a new action creator that's gonna take care
of the entire Signout process.
Underneath the sign up action creator, I'll make a new one
called export const signout
Now I am not gonna make this a kind of complicated action
creator where we get access to that dispatch function
with Redux Thunk, just because I do not expect this to
have any need for asynchronous dispatch.
In other words, we're not gonna make any requests inside
of this Signout action creator.
So it's gonna be a normal synchronous action creator.
So inside of here to log out a user
I will first clear my local storage of that token property.
To do so, we can say localStorage.clearItem
and then we specify the item that we want to clear.
So in this case token,
then after that we will return an action of type AUTH USER.
Notice that we're reusing the same type
that we used up here to sign up a user.
The auth user property right here
all that really does is flip the authenticated piece
of state in our auth reducer.
And so it's kind of a multipurpose type.
We can reuse this type right here
but rather than trying to set the authenticated piece
of state to some JSON token
we can assign it an empty string and set
which essentially means sign this user out
by clearing that authenticated piece of state.
Okay, so that looks pretty good.
Let's take a pause right here.
When we come back in the next section
we'll wire up the Signout action creator
up to our signup component versus be Signout component
and make sure that it gets called anytime the sign
out component is shown on the screen.
So quick break and I'll see you in just a minute.