Hi and welcome back.
Today I would like to discuss with you why
it's important to manage user state in the Redux Store when logging in.
The first reason would be user authentication.
By keeping track of the user's authentication status in the Redux Store,
you can easily determine whether the user is logged in or not.
This can help to restrict access
to certain parts of our app and improve the overall security of our application.
The second reason is being able to persist the user data.
By storing the user data in the redux store
we can persist the user data even if the user closes the app.
This can help to provide a seamless user
experience and make it easier for the users to resume their session.
The third reason is having access to the user's data.
We can easily access the user data from any component in our app.
This can help to reduce duplicated code
and improve the overall maintainability of our application.
And the last reason would be synchronizing users data.
Since we could synchronize the user's data
across different components in our application.
If the data is available
in the Redux Store, this can help to ensure that the user's
data remains consistent and up to date throughout our application.
That is why today I would like to modify our user reducer to make sure that we keep
track of the user's data updates when they are located.
So let's get to coding.
You're now looking at my screen
with my editor opened, my simulator running and what I want to do
is make changes to the user file in our reducers.
And the first thing that I'm going
to start with is the first name and last name and user ID given here.
We are not going to be needing these
anymore and we're not going to need update first name function either.
So I'm going to get rid of these.
And what we're going to do instead is
create a new function here and we're going to call it Login.
And this is going to be called on the Login action so that we update our state.
And what it's going to do is return a state with everything that was there
before and an object saying that is logged in is set to true.
And actually we can set it to false here by default.
And then whoops.
And I need three dots here in front instead.
And then what we're going to do is use
the action payload to merge the data that we sent using the action to the state.
So now that that is ready, what we're going to have to do is make
sure that we reset our reducer to its initial state.
So on the login page,
since I'm on this login page here, I'm just going to dispatch an action.
So we're going to need the dispatch
constant here and we're going to use dispatch for that.
And that was imported for me automatically so make sure that you do the same.
And then we're going to dispatch reset
to initial state and I'm going to import this for a second.
And now our user is reset to its initial state.
So what we want to do here is make sure that when the user logs in and it's
successful we want to dispatch an action of logging in
and we want to send it all the information about the user data.
So let's import this function but for that we would need to export it first.
So let's make this exportable, let's go to our login page and let's import this.
And now when we're going to enter
the credentials to log in
we should see our user being updated.
So I have the console log user here and I'm going to open our terminal and I'm
going to click on login and we're getting an error because our
first name and last name is not available anymore.
We were using it here so the said we're going to use the full name that should be
available to us or actually it might be Display name
because of the fact that we are returning the display name from here.
So now let's log in again, let's use the login that we created together.
I'm going to enter my password and I'm
going to click on login and let's see what
we have console logged now and great we
have the display name set to Nata Vacheishvili
so it shows this and we have the email and is logged in is set to true and we
have a profile image and the token for the user.
So now actually I'm going to go to our home page and modify the display name.
We're not going to use this dot here and let's have some spacing here.
And now the user was redirected
to the home page so everything's good and we're reading the data from the user's
reducer where we're storing all the information about the tokens.
But what we do want to do is make sure
that users that are logged in can't just swipe back and go back to the login page.
We don't want this to happen.
What should actually happen is we should
have another stack navigator for the authenticated flow so that they
can access all of these pages only if they're logged in.
And this is what we're going to be working on in the next video.
So stay tuned and I'll see you there.