WEBVTT

1
00:00:00.240 --> 00:00:01.460
Hi and welcome back.

2
00:00:01.490 --> 00:00:03.620
Today I would like to discuss with you why

3
00:00:03.650 --> 00:00:07.490
it's important to manage user state
in the Redux Store when logging in.

4
00:00:07.520 --> 00:00:10.300
The first reason would
be user authentication.

5
00:00:10.330 --> 00:00:14.060
By keeping track of the user's
authentication status in the Redux Store,

6
00:00:14.090 --> 00:00:17.740
you can easily determine whether
the user is logged in or not.

7
00:00:17.760 --> 00:00:19.460
This can help to restrict access

8
00:00:19.490 --> 00:00:24.940
to certain parts of our app and improve
the overall security of our application.

9
00:00:24.970 --> 00:00:28.340
The second reason is being
able to persist the user data.

10
00:00:28.370 --> 00:00:30.940
By storing the user data in the redux store

11
00:00:30.970 --> 00:00:34.340
we can persist the user data
even if the user closes the app.

12
00:00:34.370 --> 00:00:36.500
This can help to provide a seamless user

13
00:00:36.530 --> 00:00:40.620
experience and make it easier
for the users to resume their session.

14
00:00:40.640 --> 00:00:43.620
The third reason is having
access to the user's data.

15
00:00:43.650 --> 00:00:47.580
We can easily access the user data
from any component in our app.

16
00:00:47.610 --> 00:00:50.060
This can help to reduce duplicated code

17
00:00:50.090 --> 00:00:54.020
and improve the overall
maintainability of our application.

18
00:00:54.050 --> 00:00:57.740
And the last reason would be
synchronizing users data.

19
00:00:57.760 --> 00:00:59.860
Since we could synchronize the user's data

20
00:00:59.890 --> 00:01:02.540
across different components
in our application.

21
00:01:02.570 --> 00:01:04.050
If the data is available

22
00:01:04.080 --> 00:01:07.260
in the Redux Store,
this can help to ensure that the user's

23
00:01:07.290 --> 00:01:11.130
data remains consistent and up
to date throughout our application.

24
00:01:11.160 --> 00:01:16.050
That is why today I would like to modify
our user reducer to make sure that we keep

25
00:01:16.080 --> 00:01:19.050
track of the user's data
updates when they are located.

26
00:01:19.080 --> 00:01:20.700
So let's get to coding.

27
00:01:20.720 --> 00:01:21.980
You're now looking at my screen

28
00:01:22.010 --> 00:01:25.980
with my editor opened,
my simulator running and what I want to do

29
00:01:26.010 --> 00:01:30.020
is make changes to the user
file in our reducers.

30
00:01:30.040 --> 00:01:31.340
And the first thing that I'm going

31
00:01:31.370 --> 00:01:35.460
to start with is the first name
and last name and user ID given here.

32
00:01:35.490 --> 00:01:37.570
We are not going to be needing these

33
00:01:37.600 --> 00:01:41.460
anymore and we're not going to need
update first name function either.

34
00:01:41.490 --> 00:01:43.540
So I'm going to get rid of these.

35
00:01:43.570 --> 00:01:45.780
And what we're going to do instead is

36
00:01:45.810 --> 00:01:49.490
create a new function here
and we're going to call it Login.

37
00:01:49.520 --> 00:01:54.780
And this is going to be called on the
Login action so that we update our state.

38
00:01:54.810 --> 00:02:00.780
And what it's going to do is return
a state with everything that was there

39
00:02:00.810 --> 00:02:06.930
before and an object saying
that is logged in is set to true.

40
00:02:06.960 --> 00:02:12.300
And actually we can set it
to false here by default.

41
00:02:12.330 --> 00:02:14.100
And then whoops.

42
00:02:14.130 --> 00:02:17.100
And I need three dots
here in front instead.

43
00:02:17.130 --> 00:02:19.380
And then what we're going to do is use

44
00:02:19.410 --> 00:02:28.170
the action payload to merge the data that
we sent using the action to the state.

45
00:02:28.200 --> 00:02:32.140
So now that that is ready,
what we're going to have to do is make

46
00:02:32.170 --> 00:02:37.260
sure that we reset our
reducer to its initial state.

47
00:02:37.290 --> 00:02:38.730
So on the login page,

48
00:02:38.760 --> 00:02:43.500
since I'm on this login page here,
I'm just going to dispatch an action.

49
00:02:43.520 --> 00:02:45.180
So we're going to need the dispatch

50
00:02:45.210 --> 00:02:50.610
constant here and we're going
to use dispatch for that.

51
00:02:50.640 --> 00:02:54.940
And that was imported for me automatically
so make sure that you do the same.

52
00:02:54.970 --> 00:02:57.420
And then we're going to dispatch reset

53
00:02:57.450 --> 00:03:02.060
to initial state and I'm going
to import this for a second.

54
00:03:02.090 --> 00:03:05.860
And now our user is reset
to its initial state.

55
00:03:05.890 --> 00:03:13.300
So what we want to do here is make sure
that when the user logs in and it's

56
00:03:13.330 --> 00:03:20.980
successful we want to dispatch
an action of logging in

57
00:03:21.010 --> 00:03:25.220
and we want to send it all
the information about the user data.

58
00:03:25.250 --> 00:03:30.180
So let's import this function but for
that we would need to export it first.

59
00:03:30.210 --> 00:03:37.000
So let's make this exportable, let's go
to our login page and let's import this.

60
00:03:37.280 --> 00:03:40.540
And now when we're going to enter

61
00:03:40.570 --> 00:03:44.680
the credentials to log in

62
00:03:48.360 --> 00:03:51.340
we should see our user being updated.

63
00:03:51.370 --> 00:03:57.840
So I have the console log user here
and I'm going to open our terminal and I'm

64
00:03:57.870 --> 00:04:02.220
going to click on login
and we're getting an error because our

65
00:04:02.250 --> 00:04:05.180
first name and last name
is not available anymore.

66
00:04:05.210 --> 00:04:10.660
We were using it here so the said we're
going to use the full name that should be

67
00:04:10.690 --> 00:04:18.540
available to us
or actually it might be Display name

68
00:04:18.570 --> 00:04:26.020
because of the fact that we are
returning the display name from here.

69
00:04:26.040 --> 00:04:34.340
So now let's log in again, let's use
the login that we created together.

70
00:04:34.360 --> 00:04:37.140
I'm going to enter my password and I'm

71
00:04:37.160 --> 00:04:39.740
going to click on login
and let's see what

72
00:04:39.770 --> 00:04:42.560
we have console logged now and great we

73
00:04:42.590 --> 00:04:45.140
have the display name set
to Nata Vacheishvili

74
00:04:45.160 --> 00:04:50.960
so it shows this and we have the email
and is logged in is set to true and we

75
00:04:50.980 --> 00:04:54.460
have a profile image
and the token for the user.

76
00:04:54.480 --> 00:04:59.580
So now actually I'm going to go to our
home page and modify the display name.

77
00:04:59.600 --> 00:05:03.900
We're not going to use this dot here
and let's have some spacing here.

78
00:05:03.920 --> 00:05:06.000
And now the user was redirected

79
00:05:06.030 --> 00:05:10.740
to the home page so everything's good
and we're reading the data from the user's

80
00:05:10.770 --> 00:05:14.180
reducer where we're storing all
the information about the tokens.

81
00:05:14.210 --> 00:05:16.780
But what we do want to do is make sure

82
00:05:16.800 --> 00:05:21.900
that users that are logged in can't just
swipe back and go back to the login page.

83
00:05:21.920 --> 00:05:23.420
We don't want this to happen.

84
00:05:23.450 --> 00:05:25.860
What should actually happen is we should

85
00:05:25.890 --> 00:05:30.940
have another stack navigator
for the authenticated flow so that they

86
00:05:30.970 --> 00:05:34.100
can access all of these pages
only if they're logged in.

87
00:05:34.120 --> 00:05:37.140
And this is what we're going to be
working on in the next video.

88
00:05:37.170 --> 00:05:39.120
So stay tuned and I'll see you there.