1
00:00:01,020 --> 00:00:02,700
Speaker: So, we've now got an action creator

2
00:00:02,700 --> 00:00:04,650
to handle authentication,

3
00:00:04,650 --> 00:00:08,670
and we've got a reducer to act on that action creator.

4
00:00:08,670 --> 00:00:11,130
Now, I have said several times that we're gonna kind of

5
00:00:11,130 --> 00:00:13,680
push right through the redux stuff really quickly,

6
00:00:13,680 --> 00:00:14,580
but just to make sure,

7
00:00:14,580 --> 00:00:16,530
in case I was going too quickly on what we're doing,

8
00:00:16,530 --> 00:00:18,510
I want to do a quick review

9
00:00:18,510 --> 00:00:21,840
on the topic of the action creators and the reducer,

10
00:00:21,840 --> 00:00:25,080
and just kind of their whole flow within our system.

11
00:00:25,080 --> 00:00:26,940
So, I'm gonna pull another diagram on the screen

12
00:00:26,940 --> 00:00:29,253
to explain the entire process.

13
00:00:31,530 --> 00:00:33,990
So, this is a cycle or a diagram

14
00:00:33,990 --> 00:00:36,450
of a action going through an action creator,

15
00:00:36,450 --> 00:00:39,390
and then a reducer, and then updating our state.

16
00:00:39,390 --> 00:00:42,210
So, this is all what's going on behind the scenes

17
00:00:42,210 --> 00:00:43,890
or what we want to have happened

18
00:00:43,890 --> 00:00:46,320
when a user clicks on the Sign In button.

19
00:00:46,320 --> 00:00:48,090
So, when a user clicks on the Sign In button,

20
00:00:48,090 --> 00:00:51,840
we want to call our action creator called Authenticate

21
00:00:51,840 --> 00:00:54,120
to authenticate our user.

22
00:00:54,120 --> 00:00:57,240
The action creator is going to return an action

23
00:00:57,240 --> 00:01:01,233
that includes a payload of true and a type of CHANGE_AUTH.

24
00:01:03,810 --> 00:01:07,290
This action is gonna flow into our authentication reducer.

25
00:01:07,290 --> 00:01:10,290
And the authentication reducer is just going to return

26
00:01:10,290 --> 00:01:12,450
whatever action.payload is.

27
00:01:12,450 --> 00:01:14,430
And so, the real key here of figuring out

28
00:01:14,430 --> 00:01:16,440
whether or not the user is logged in,

29
00:01:16,440 --> 00:01:19,863
is the argument that we pass to our action creator.

30
00:01:21,750 --> 00:01:23,220
Once we call our action creator,

31
00:01:23,220 --> 00:01:25,920
and the action flows to the reducer,

32
00:01:25,920 --> 00:01:30,300
the reducer is going to produce a new application state,

33
00:01:30,300 --> 00:01:33,510
which assuming that we pass true to the action creator,

34
00:01:33,510 --> 00:01:37,020
will now be authenticated is true.

35
00:01:37,020 --> 00:01:40,350
This new piece of state then flows into our application

36
00:01:40,350 --> 00:01:43,050
causing our application to rerender.

37
00:01:43,050 --> 00:01:44,970
So, our job now is to make sure

38
00:01:44,970 --> 00:01:46,950
that the button that is displayed,

39
00:01:46,950 --> 00:01:49,620
and the action creator that is associated with it

40
00:01:49,620 --> 00:01:53,283
is correct, given whether or not the user is authenticated.

41
00:01:54,450 --> 00:01:55,590
So, with that last part,

42
00:01:55,590 --> 00:01:57,390
I wanna pull another diagram on screen

43
00:01:57,390 --> 00:01:59,690
just to bring a little bit more clarity to it.

44
00:02:01,770 --> 00:02:03,630
So, this is another diagram that explains

45
00:02:03,630 --> 00:02:04,590
what needs to happen,

46
00:02:04,590 --> 00:02:07,290
or what we need to achieve in our application

47
00:02:07,290 --> 00:02:11,130
when our authentication state is false or true.

48
00:02:11,130 --> 00:02:13,590
So, given false or true, it's really just, you know,

49
00:02:13,590 --> 00:02:14,423
the opposite.

50
00:02:14,423 --> 00:02:16,500
We're gonna do the opposite case.

51
00:02:16,500 --> 00:02:19,020
So, if a user is not authenticated,

52
00:02:19,020 --> 00:02:21,840
we want to be able to sign our user in,

53
00:02:21,840 --> 00:02:25,143
which means we want to show a button that says Sign In.

54
00:02:26,940 --> 00:02:28,470
If the user clicks on that button,

55
00:02:28,470 --> 00:02:32,643
we want to call our authenticate action creator with true.

56
00:02:34,230 --> 00:02:36,990
Then, in the total opposite case,

57
00:02:36,990 --> 00:02:39,240
if the user is already authenticated,

58
00:02:39,240 --> 00:02:41,160
so authenticated is true,

59
00:02:41,160 --> 00:02:43,470
then the button that we show should say

60
00:02:43,470 --> 00:02:46,350
something effect of, "Hey, click here to log out".

61
00:02:46,350 --> 00:02:47,640
And when the user clicks it,

62
00:02:47,640 --> 00:02:50,130
we should call our action creator with false,

63
00:02:50,130 --> 00:02:53,340
meaning change the user's current authentication state

64
00:02:53,340 --> 00:02:55,233
to false or logged out.

65
00:02:56,670 --> 00:02:58,620
So with that in mind, should be a little bit easier

66
00:02:58,620 --> 00:03:01,110
to put put our action creator together.

67
00:03:01,110 --> 00:03:04,170
I'm gonna open up our header.js file.

68
00:03:04,170 --> 00:03:06,030
Now, we need to do a couple things in here.

69
00:03:06,030 --> 00:03:08,250
First, we need to get access

70
00:03:08,250 --> 00:03:10,980
to the authenticated piece of state,

71
00:03:10,980 --> 00:03:12,430
and number two,

72
00:03:12,430 --> 00:03:15,540
we need to also wire up our action creator,

73
00:03:15,540 --> 00:03:16,830
and call the action creator

74
00:03:16,830 --> 00:03:19,410
whenever the user clicks on a button.

75
00:03:19,410 --> 00:03:21,930
So, let's wire up this component to be a container

76
00:03:21,930 --> 00:03:24,810
so it can get access to redux state.

77
00:03:24,810 --> 00:03:27,254
At the top, I'm going to import

78
00:03:27,254 --> 00:03:29,850
connect from react

79
00:03:29,850 --> 00:03:30,930
redux,

80
00:03:30,930 --> 00:03:33,840
and I'm also going to import all of our action creators

81
00:03:33,840 --> 00:03:35,010
with import

82
00:03:35,010 --> 00:03:36,450
star

83
00:03:36,450 --> 00:03:37,680
as actions

84
00:03:37,680 --> 00:03:38,891
from

85
00:03:38,891 --> 00:03:40,233
actions.

86
00:03:41,580 --> 00:03:43,170
So, now at the bottom of our file,

87
00:03:43,170 --> 00:03:45,060
we're gonna use the connect helper

88
00:03:45,060 --> 00:03:47,553
to promote header into a container.

89
00:03:50,030 --> 00:03:53,970
We're going to use connect, place one set of parens,

90
00:03:53,970 --> 00:03:56,883
and then wrap header inside another set.

91
00:03:58,560 --> 00:04:02,190
Next, we'll define the function map state to props

92
00:04:02,190 --> 00:04:04,620
that we're gonna pass to connect.

93
00:04:04,620 --> 00:04:08,430
So, function, map, state to props.

94
00:04:08,430 --> 00:04:11,730
This is gonna get called with our application state

95
00:04:11,730 --> 00:04:16,709
and we want to return an object with key authenticated.

96
00:04:18,480 --> 00:04:22,170
And this piece of state is gonna come from state dot,

97
00:04:22,170 --> 00:04:23,400
and remember this,

98
00:04:23,400 --> 00:04:25,710
the property that we're gonna refer to right here

99
00:04:25,710 --> 00:04:27,960
is produced by our combined reducer's call

100
00:04:27,960 --> 00:04:29,100
inside the index file.

101
00:04:29,100 --> 00:04:31,920
So, let's double check what it is really quick.

102
00:04:31,920 --> 00:04:34,860
So, it's authenticated, that's the key that we care about.

103
00:04:34,860 --> 00:04:37,578
So, I'm gonna flip back over to header

104
00:04:37,578 --> 00:04:41,193
and we'll do state.authenticated.

105
00:04:42,120 --> 00:04:44,850
Now, this object is gonna show up as props

106
00:04:44,850 --> 00:04:46,113
inside of our header.

107
00:04:47,670 --> 00:04:52,670
We'll place our map state to props inside the connect.

108
00:04:53,670 --> 00:04:55,240
And now, we can refer to

109
00:04:56,460 --> 00:04:59,790
this.props.authenticated

110
00:04:59,790 --> 00:05:01,740
inside of our component.

111
00:05:01,740 --> 00:05:04,530
So now, the key here is that we wanna do something different

112
00:05:04,530 --> 00:05:08,130
based on whether or not the user is currently authenticated.

113
00:05:08,130 --> 00:05:11,220
So, if the user is authenticated,

114
00:05:11,220 --> 00:05:14,433
we'll say, if the user is authenticated,

115
00:05:15,270 --> 00:05:17,460
then I want to show a button that will allow them

116
00:05:17,460 --> 00:05:20,010
to sign out of the application.

117
00:05:20,010 --> 00:05:21,970
So, we'll return a button

118
00:05:25,170 --> 00:05:26,440
that says simply

119
00:05:27,420 --> 00:05:28,253
Sign Out.

120
00:05:30,690 --> 00:05:32,100
So, this is step one.

121
00:05:32,100 --> 00:05:33,480
This is to make sure that we're getting

122
00:05:33,480 --> 00:05:35,550
the correct information on the screen,

123
00:05:35,550 --> 00:05:37,290
or the correct text on the screen

124
00:05:37,290 --> 00:05:40,920
based on whether or not the user is currently signed in.

125
00:05:40,920 --> 00:05:42,930
Step two, is to make sure that when a user

126
00:05:42,930 --> 00:05:44,610
clicks on either button,

127
00:05:44,610 --> 00:05:46,680
we change their authentication state.

128
00:05:46,680 --> 00:05:48,030
So, we wanna change whether or not

129
00:05:48,030 --> 00:05:50,100
they're currently authenticated.

130
00:05:50,100 --> 00:05:52,650
To do this, we'll just add a click event handler

131
00:05:52,650 --> 00:05:54,510
on each of the buttons.

132
00:05:54,510 --> 00:05:57,540
So, if we want the user to be able to sign out,

133
00:05:57,540 --> 00:05:59,280
we'll say on click,

134
00:05:59,280 --> 00:06:01,773
and then we'll pass this, a fat arrow function,

135
00:06:04,230 --> 00:06:06,393
this dot props dot,

136
00:06:07,620 --> 00:06:09,150
and now, the props object

137
00:06:09,150 --> 00:06:10,110
that we're gonna refer to right here

138
00:06:10,110 --> 00:06:12,060
is gonna be our action creator,

139
00:06:12,060 --> 00:06:14,100
which we imported up at the top,

140
00:06:14,100 --> 00:06:15,210
and we need to import,

141
00:06:15,210 --> 00:06:17,730
or we need to make use of down on connect.

142
00:06:17,730 --> 00:06:19,020
The name of that action creator

143
00:06:19,020 --> 00:06:22,413
can be found in our actions dot index.js file.

144
00:06:24,090 --> 00:06:26,790
And the action creator's name was simply authenticate.

145
00:06:28,950 --> 00:06:31,743
So, we'll say this.props.authenticate.

146
00:06:32,610 --> 00:06:35,220
And, if the user is clicking on the button,

147
00:06:35,220 --> 00:06:36,930
we want to change the authentication,

148
00:06:36,930 --> 00:06:38,070
we want them to sign out.

149
00:06:38,070 --> 00:06:40,560
That means we need to pass false to authenticate,

150
00:06:40,560 --> 00:06:43,590
meaning change the current piece of authentication state

151
00:06:43,590 --> 00:06:44,423
to false.

152
00:06:44,423 --> 00:06:45,573
No, they're not logged in.

153
00:06:46,680 --> 00:06:47,580
So, false.

154
00:06:47,580 --> 00:06:49,280
And then, we'll do the same thing,

155
00:06:51,660 --> 00:06:53,490
another fat arrow function,

156
00:06:53,490 --> 00:06:55,290
this.props.authenticate,

157
00:06:55,290 --> 00:06:59,730
but this time true for the Sign In case.

158
00:06:59,730 --> 00:07:03,450
Now, the last step is just make sure that our header class,

159
00:07:03,450 --> 00:07:06,417
our header component has access to the action creator.

160
00:07:06,417 --> 00:07:09,240
And to do that, we need to make sure we pass these actions

161
00:07:09,240 --> 00:07:12,540
into the connect helper as the second argument.

162
00:07:12,540 --> 00:07:14,220
So, go down to the bottom,

163
00:07:14,220 --> 00:07:18,963
and as a second argument will add on, excuse me, actions.

164
00:07:20,760 --> 00:07:22,470
All right, let's save this file.

165
00:07:22,470 --> 00:07:24,150
And I think we're at a pretty good spot

166
00:07:24,150 --> 00:07:25,830
to test in the browser.

167
00:07:25,830 --> 00:07:28,020
So, we're gonna flip over to the browser.

168
00:07:28,020 --> 00:07:32,490
We'll refresh, I click Sign In, and it turns into Sign Out.

169
00:07:32,490 --> 00:07:34,260
And so, you can see very simply,

170
00:07:34,260 --> 00:07:37,713
all we're doing here is toggling our authentication state.

171
00:07:38,580 --> 00:07:39,810
So, this is looking pretty good.

172
00:07:39,810 --> 00:07:42,360
This is pretty much part one of our application.

173
00:07:42,360 --> 00:07:44,310
We've got the ability to say whether or not

174
00:07:44,310 --> 00:07:46,470
the user is currently authenticated.

175
00:07:46,470 --> 00:07:48,300
That means the only thing we need to do now

176
00:07:48,300 --> 00:07:50,790
is build our higher order component.

177
00:07:50,790 --> 00:07:52,410
And based on our higher order component,

178
00:07:52,410 --> 00:07:55,500
we'll have it automatically kick our users

179
00:07:55,500 --> 00:07:57,000
back to the home route,

180
00:07:57,000 --> 00:07:59,370
if they try to visit the resources route

181
00:07:59,370 --> 00:08:01,170
when they are not signed in.

182
00:08:01,170 --> 00:08:03,870
So, let's start tackling that inside the next section.