Now to logout,
we need a new action which we can dispatch.
So in the auth file in the actions folder, I will add a new action creator, doesn't really matter where
you add it, I add it down there and I export it and name it logout which sounds like a fitting name
to me.
I expect no arguments there and I need an action identifier for logging out though,
so here we can export
const logout with the logout string and use that down there
and in this action creator which is a normal action creator where I don't need to send any HTTP request
or anything like that, I just dispatch this logout action in the end or I create this logout action
object.
Now we can use that and I want to be able to logout with the help of the side drawer, in the side drawer,
I want to have this logout button.
That means that we need to do something which we haven't done before,
we need to add a new button to the side drawer.
Thus far, we only add the automatically created buttons but adding your own content isn't too hard.
For that, let's go to the shop navigator file where we set up the drawer,
here it is and then here
besides my content options, we can also add a content component here.
This allows you to add your own content for the side drawer instead of the default content.
Now this takes a function which receives props because in the end, this is a React component which you
add here, so it gets props and it has to return some jsx and therefore you need to make sure you're
importing react from react and we'll also need a couple of other imports.
We also need to import something from React Native and that should be the save area
view and I also want to import the button from React Native. In addition, from React navigation, we need
to import the drawer items and also from React Native again,
I also need the view. Now with that imported, let's go down to our newly added content component
and here we can now return a view with a style of select one, you can of course also add a stylesheet,
I'll just add inline styling and by the way, this component could of course also reside in a separate
file, it doesn't have to be created on the fly in this file. Now in this view, I want to have a save area
view and in there, make sure you add force inset equal to top always horizontal never and this just controls
how this is laid out and in that save area view, you should now add the drawer items and important, pass
props to those because these are the default drawer items which are rendered and that should still be
the case
and in order for them to be configured correctly, you need to pass in props which is in the end passed
in by React navigation and holds all your drawer config and so on
and now you can add your own extra drawer item here and that will be this button,
the default React Native button where I say logout, where I want to add a color of let's say colors.primary
and where onPress,
I now want to dispatch this logout action and now we'll have a huge problem here,
how can we dispatch this from here?
Now first of all, if you save this, you should be seeing this.
So here if you expand the drawer, here's the logout button
right so this works
and of course you can style and position this however you want
and by the way just to double check,
we can also see this on Android if we do login there,
here in the drawer
we also have the logout button. By the way, we might want to add a little bit more padding on the top
but how can we dispatch everything?
And I will add some extra padding here
of 20
because my save area view works but it does barely leave more spacing than I need.
So in order to have some extra spacing, a little bit of padding can't hurt,
I think that's better
but again, how can we now make sure that we can dispatch an action here? Well this is a React component
right,
so in the end, we can simply use dispatch here.
So we can import use dispatch here from React Redux,
so what we did before and use that in here because you can use this hook in any component and this is
just a component. So in here before we return jsx, I can get access to my dispatch function with use
dispatch and therefore now here when we press this button, we can call dispatch and dispatch our auth
action and for that of course, you just need to make sure you are importing it,
so import everything as auth actions from the store folder, the actions folder, the auth file and now use
auth actions to create that action, here auth actions.logout like this and
this should dispatch the logout action. Now besides that, I also want to navigate away so we can also
call props.navigation.navigate, that will be available here and go back to the auth screen here,
so basically to this auth screen here in the switch navigator. Our drawer is part of the shop navigator
so we can also go to the auth screen from there.
Now when we dispatch logout, I want to make sure that in the reducer, we're also doing something.
We have our logout action creator here,
so in the reducer, in the auth reducer, I want to have a new case, the logout case and for that, you should make sure
you are importing the logout identifier
and of course here it's very simple, I return my initial state which in the end means that the token
is reset and the userId is reset and now let's give this a try.
If I go back here and I now click logout, I am back on the auth screen,
so that works.
Let's also give it a try on Android,
if I click on logout here,
we're back.
So this is working,
we're almost there with that but we also should be logged out automatically if the token expired because
it has this expiration date
and right now we have no automatic expiry.