1
00:00:07,640 --> 00:00:08,570
In this video.

2
00:00:08,570 --> 00:00:12,060
Let's finish up with the reducer and then the action.

3
00:00:12,080 --> 00:00:18,800
Even though we were able to log in back, we are not managing the state or we are not keeping track

4
00:00:18,800 --> 00:00:20,930
and it changes in our application.

5
00:00:21,110 --> 00:00:28,190
So inside the component and then the context, let's open the of contexts.

6
00:00:28,280 --> 00:00:35,450
So what we want to do is that we want to update this state with the response that came back when we

7
00:00:35,450 --> 00:00:38,120
make a request to our endpoint to log in.

8
00:00:38,600 --> 00:00:44,060
So we want to update the user off with the response that came back.

9
00:00:44,060 --> 00:00:49,920
And in case we have an error, we want to update the error property here also.

10
00:00:49,940 --> 00:00:52,160
So how can we achieve that?

11
00:00:52,280 --> 00:00:55,520
That is why we have the reducer.

12
00:00:56,030 --> 00:01:04,400
So the reducer is going to take the action type and then the reducer is going to do some computation

13
00:01:04,400 --> 00:01:06,140
to update the states.

14
00:01:06,140 --> 00:01:08,720
So let's see how we are going to implement it.

15
00:01:08,960 --> 00:01:11,270
So now let's move this one.

16
00:01:11,480 --> 00:01:19,520
So first step is that we are going to check the action type that is coming in into this reducer.

17
00:01:19,880 --> 00:01:24,320
And remember, we can do that one using the switch statement.

18
00:01:24,410 --> 00:01:27,290
So here we make use of action.

19
00:01:27,290 --> 00:01:30,710
And on that we're going to have a property called type.

20
00:01:30,950 --> 00:01:33,770
So we'll be asking where from this one.

21
00:01:33,920 --> 00:01:36,560
So let me show you where you go to type.

22
00:01:36,650 --> 00:01:44,330
So inside the log in user action, we are going to make this or this dispatch function for use reducer.

23
00:01:44,570 --> 00:01:49,120
So here we are going to dispatch two actions.

24
00:01:49,130 --> 00:01:54,320
One is for success here and then for error.

25
00:01:54,740 --> 00:02:03,880
So here after the response, we are going to dispatch an action and here we go as a function, call

26
00:02:03,950 --> 00:02:06,190
the pass in an object.

27
00:02:06,200 --> 00:02:10,699
And for this object we are going to specify what is called type.

28
00:02:10,880 --> 00:02:14,480
And this type is what I have access on the action.

29
00:02:14,720 --> 00:02:20,000
So here, the type here is going to be as log in success.

30
00:02:22,060 --> 00:02:22,750
All right.

31
00:02:22,750 --> 00:02:27,690
And this is we are going to send some data to update the states.

32
00:02:27,700 --> 00:02:31,240
So here I will provide what is called payload.

33
00:02:31,240 --> 00:02:33,460
By convention is payload.

34
00:02:33,610 --> 00:02:39,120
So here, what data that you want to send to the reducer is the response coming back.

35
00:02:39,130 --> 00:02:43,570
So here we are going to make use of response data.

36
00:02:43,600 --> 00:02:46,810
Remember, we have the actual response on the data.

37
00:02:47,140 --> 00:02:47,640
Good.

38
00:02:47,650 --> 00:02:53,500
But before we dispatch, we need to make some conditions because we don't want to dispatch success when

39
00:02:53,500 --> 00:02:54,580
we have an error.

40
00:02:54,820 --> 00:03:00,700
That is why on the response we have what is called status, where we have some error here.

41
00:03:00,850 --> 00:03:07,110
So let's try to comment this one that is inside and I want to show you something.

42
00:03:07,120 --> 00:03:13,990
So again, let's get back here and log in with the add on and the password is going to be one, two,

43
00:03:13,990 --> 00:03:21,730
three, four, five and hit send and let me check where I got some error here because of the reducer

44
00:03:21,730 --> 00:03:22,540
function.

45
00:03:22,540 --> 00:03:24,590
But lucky for us I have the response.

46
00:03:24,590 --> 00:03:32,650
So here I want to check if response the data, the status is equal to success, then I'll go ahead and

47
00:03:32,650 --> 00:03:33,820
then dispatch that.

48
00:03:33,820 --> 00:03:35,860
So here let me cut it.

49
00:03:35,860 --> 00:03:49,030
And now I'll make some condition and say response dot data dot status is equal to success.

50
00:03:49,060 --> 00:03:55,990
Do you remember when we're developing the API and I said that let's provide status equal to success

51
00:03:55,990 --> 00:03:58,720
or failure because you will need it in the front end.

52
00:03:58,720 --> 00:04:00,400
And this is a time.

53
00:04:00,490 --> 00:04:11,230
So here we put in our dispatch, remember as soon as we add component get rendered, the code inside

54
00:04:11,230 --> 00:04:13,780
is going to be called instant.

55
00:04:13,960 --> 00:04:20,440
So by the time our component got rendered, there will be no data on the response.

56
00:04:20,440 --> 00:04:29,050
In that way you are going to see an error that cannot access a property of undefined and this is an

57
00:04:29,050 --> 00:04:31,330
error that we are going to face a lot.

58
00:04:31,570 --> 00:04:35,380
So to avoid this one, let me show you one clue here.

59
00:04:35,920 --> 00:04:38,460
You need to make what is called conditionals.

60
00:04:38,470 --> 00:04:41,230
So here, let's cut this one from here.

61
00:04:41,230 --> 00:04:43,270
And now let me show you something here.

62
00:04:43,270 --> 00:04:45,400
So here we go.

63
00:04:45,430 --> 00:04:52,720
We bring in response and then double end operator and then response dot data.

64
00:04:52,720 --> 00:04:54,070
So what does it mean?

65
00:04:54,310 --> 00:05:02,170
It simply means that if we have a response and then on the response, we have a data, then go ahead

66
00:05:02,170 --> 00:05:03,070
and use it.

67
00:05:03,550 --> 00:05:06,700
And also we are also checking for status.

68
00:05:06,700 --> 00:05:07,900
So here we go.

69
00:05:07,930 --> 00:05:16,030
We also going to check if the response dot data and then dot status.

70
00:05:18,050 --> 00:05:25,640
So this one means that if we have an object and we have a data on it, then go ahead and use this property.

71
00:05:26,030 --> 00:05:33,040
And also, if you have a data with a property or status, go ahead and use it for this syntax.

72
00:05:33,050 --> 00:05:36,440
There is no way you're are going to see this kind of error.

73
00:05:36,800 --> 00:05:42,610
But for ES6, we can shorten this one using what is called optional chaining.

74
00:05:42,620 --> 00:05:46,400
So let's try to rewrite this code like this.

75
00:05:46,400 --> 00:05:55,280
So rest and then question mark and then period and then data question mark and then period and then

76
00:05:55,280 --> 00:05:56,060
styles.

77
00:05:56,210 --> 00:05:58,100
It is same as before.

78
00:05:58,190 --> 00:06:05,120
And this means that if you have a response object and on that we have a data, go ahead and use this

79
00:06:05,120 --> 00:06:05,450
title.

80
00:06:05,690 --> 00:06:07,160
So here we go.

81
00:06:07,280 --> 00:06:10,190
So now I am dispatching an option from here.

82
00:06:10,430 --> 00:06:12,380
So the same thing for Arrow.

83
00:06:12,410 --> 00:06:15,140
We need to dispatch an action also.

84
00:06:15,140 --> 00:06:17,210
So I'm going to copy this one.

85
00:06:17,360 --> 00:06:24,170
And at this point, you know that we have an arrow, but the action type here is going to be failed

86
00:06:24,680 --> 00:06:26,150
as failed.

87
00:06:26,810 --> 00:06:33,920
So here we are using dispatch to be able to send the response coming back from the request and then

88
00:06:33,920 --> 00:06:35,690
to update our state.

89
00:06:35,690 --> 00:06:39,080
So now let's have access to it here.

90
00:06:39,350 --> 00:06:43,820
So here the action type watch will present this one.

91
00:06:44,330 --> 00:06:48,560
So here we go and are going to make use of case.

92
00:06:48,980 --> 00:07:00,470
If the case is equal to log in success, then colon and here we are going to update our states.

93
00:07:00,800 --> 00:07:06,680
So if you console.log the action, we are going to see the payload.

94
00:07:06,680 --> 00:07:08,870
So let's try out and see.

95
00:07:08,870 --> 00:07:12,260
Let's console the log, the action.

96
00:07:13,900 --> 00:07:14,500
Now.

97
00:07:14,500 --> 00:07:16,030
Moment of truth.

98
00:07:16,060 --> 00:07:17,450
So here.

99
00:07:17,470 --> 00:07:19,510
Think we got some error here?

100
00:07:19,660 --> 00:07:24,640
Response is not defined on line by eighths of context.

101
00:07:24,820 --> 00:07:26,760
Line number 50.

102
00:07:26,770 --> 00:07:27,610
Sorry.

103
00:07:27,760 --> 00:07:29,360
Which is here.

104
00:07:29,380 --> 00:07:30,160
Let's see.

105
00:07:30,550 --> 00:07:31,180
Oh, sorry.

106
00:07:31,180 --> 00:07:32,680
It's supposed to be error.

107
00:07:33,130 --> 00:07:40,420
Well, and for this one to be able to get the actual error response, remember, it is not on the data,

108
00:07:40,420 --> 00:07:43,060
but instead it is on error.

109
00:07:43,060 --> 00:07:45,300
And then question mark.

110
00:07:45,310 --> 00:07:46,990
Dot responds.

111
00:07:47,770 --> 00:07:48,790
Question mark.

112
00:07:48,820 --> 00:07:50,020
Dot Data.

113
00:07:50,020 --> 00:07:51,010
Question mark.

114
00:07:51,040 --> 00:07:52,420
Dot message.

115
00:07:52,900 --> 00:07:54,850
You saw it in the console, right?

116
00:07:55,060 --> 00:07:56,170
So that is it.

117
00:07:56,170 --> 00:07:59,170
So let's try again and then look in.

118
00:07:59,260 --> 00:08:07,750
So here, let me clear the console here and let me provide the username Adam at Gmail.

119
00:08:09,190 --> 00:08:11,130
Dot com and a password.

120
00:08:11,140 --> 00:08:12,610
One, two, three, four, five.

121
00:08:12,610 --> 00:08:13,780
And let me hit st.

122
00:08:15,140 --> 00:08:16,340
And let's have a look.

123
00:08:16,520 --> 00:08:20,280
You can see that on the of line number 48.

124
00:08:20,300 --> 00:08:22,340
This is what we got.

125
00:08:22,580 --> 00:08:26,260
Remember line number 48 on the off context?

126
00:08:26,270 --> 00:08:29,690
And what is line number 48, which is this one?

127
00:08:29,780 --> 00:08:30,470
Oh, no.

128
00:08:30,500 --> 00:08:36,500
I am expecting this one to be called the action here.

129
00:08:36,500 --> 00:08:38,120
That is going to be called.

130
00:08:38,150 --> 00:08:39,980
So what is the problem?

131
00:08:40,370 --> 00:08:47,780
Let's make sure that we are typing the same log in success and here to look in success.