1
00:00:01,350 --> 00:00:04,560
-: In the last section we added in React Router.

2
00:00:04,560 --> 00:00:07,890
Remember, React Router consists of a router component,

3
00:00:07,890 --> 00:00:10,650
and then nested route components within it.

4
00:00:10,650 --> 00:00:13,230
We also declared the history object,

5
00:00:13,230 --> 00:00:14,878
which tells React Router

6
00:00:14,878 --> 00:00:19,260
how it should work with the current URL and the browser.

7
00:00:19,260 --> 00:00:22,530
We also defined two possible routes that the user can visit.

8
00:00:22,530 --> 00:00:24,720
They can either hit the root route

9
00:00:24,720 --> 00:00:26,400
which will always show app,

10
00:00:26,400 --> 00:00:28,590
or they could hit the resources route,

11
00:00:28,590 --> 00:00:31,560
which will show our resources component.

12
00:00:31,560 --> 00:00:32,520
Now, at this point in time,

13
00:00:32,520 --> 00:00:35,340
we haven't added anything around authentication

14
00:00:35,340 --> 00:00:39,000
into our component just yet, or our entire application.

15
00:00:39,000 --> 00:00:41,880
So that's what we're gonna focus on inside of this section.

16
00:00:41,880 --> 00:00:43,080
The goal is to say,

17
00:00:43,080 --> 00:00:46,920
whenever a user clicks "sign in" at the top,

18
00:00:46,920 --> 00:00:48,480
they should instantly be turned

19
00:00:48,480 --> 00:00:51,270
into a kind of signed-in state.

20
00:00:51,270 --> 00:00:52,800
Now again, we're going to assume

21
00:00:52,800 --> 00:00:56,400
that there's really no username here.

22
00:00:56,400 --> 00:00:58,440
There's no username, no password.

23
00:00:58,440 --> 00:01:01,500
Just by clicking the login button or the sign-in button

24
00:01:01,500 --> 00:01:04,983
they should instantly flip into a signed in state.

25
00:01:06,390 --> 00:01:08,550
So here's how we're gonna accomplish that.

26
00:01:08,550 --> 00:01:10,500
Inside of our header, we're gonna say

27
00:01:10,500 --> 00:01:13,590
that whenever a user clicks the sign-in button

28
00:01:13,590 --> 00:01:15,810
we should call an action creator.

29
00:01:15,810 --> 00:01:19,080
And that action creator should just do a Boolean flip

30
00:01:19,080 --> 00:01:21,480
on the user's current authentication state.

31
00:01:21,480 --> 00:01:24,840
So if they're currently logged in, flip them to logged out.

32
00:01:24,840 --> 00:01:27,840
If they're currently logged out, flip them to logged in.

33
00:01:27,840 --> 00:01:29,550
In practice, this is gonna be

34
00:01:29,550 --> 00:01:31,470
a pretty simple little component,

35
00:01:31,470 --> 00:01:33,873
or bit of functionality, that we add in here.

36
00:01:37,350 --> 00:01:40,050
All right, so I think that the best place to start off

37
00:01:40,050 --> 00:01:44,640
is with our action creator inside of the actions directory.

38
00:01:44,640 --> 00:01:47,700
We've got our action creator file, index.js,

39
00:01:47,700 --> 00:01:49,740
but we don't have a types file yet.

40
00:01:49,740 --> 00:01:52,440
So let's go ahead and start with the types.

41
00:01:52,440 --> 00:01:55,260
Inside of my src-actions directory,

42
00:01:55,260 --> 00:01:59,913
I'm gonna make a new file called types.js,

43
00:02:02,130 --> 00:02:03,840
and then inside of this we'll define

44
00:02:03,840 --> 00:02:06,030
our single type for our application.

45
00:02:06,030 --> 00:02:09,002
Our only type is gonna be export const CHANGE_AUTH.

46
00:02:11,850 --> 00:02:15,540
So we'll say whenever an action with CHANGE_AUTH comes by,

47
00:02:15,540 --> 00:02:18,600
just flip the current authentication status

48
00:02:18,600 --> 00:02:20,730
from true to false or from false to true,

49
00:02:20,730 --> 00:02:23,030
just the opposite of whatever it currently is.

50
00:02:27,150 --> 00:02:29,100
With our type in place,

51
00:02:29,100 --> 00:02:33,330
we'll now go into our src- actions index file

52
00:02:33,330 --> 00:02:34,953
and make our action creator.

53
00:02:36,060 --> 00:02:38,793
First, we'll import our type at the top.

54
00:02:43,650 --> 00:02:46,560
We'll import our CHANGE_AUTH type,

55
00:02:46,560 --> 00:02:51,560
and then we will export one function called authenticate.

56
00:02:53,400 --> 00:02:55,740
And on authenticate, we're going to assume

57
00:02:55,740 --> 00:02:57,690
that authenticate is going to be called

58
00:02:57,690 --> 00:02:59,250
with whether or not the user should now

59
00:02:59,250 --> 00:03:01,740
be logged in or logged out.

60
00:03:01,740 --> 00:03:04,680
So we will pass in what will be a Boolean here,

61
00:03:04,680 --> 00:03:08,163
and we'll call it isLoggedIn.

62
00:03:11,790 --> 00:03:13,470
Whenever action creator gets called,

63
00:03:13,470 --> 00:03:18,163
we'll return an action whose type will be CHANGE_AUTH,

64
00:03:19,590 --> 00:03:21,860
and the payload will be isLoggedIn.

65
00:03:26,670 --> 00:03:28,290
Now with our action creator complete,

66
00:03:28,290 --> 00:03:30,450
we can get started on our reducer.

67
00:03:30,450 --> 00:03:32,730
So this is gonna be a very straightforward,

68
00:03:32,730 --> 00:03:35,820
very simple reducer whose really only job

69
00:03:35,820 --> 00:03:38,550
is going to be to respond to this single action type

70
00:03:38,550 --> 00:03:39,750
that we have right here.

71
00:03:41,730 --> 00:03:46,623
I'm gonna make a new reducer called authentication,

72
00:03:48,210 --> 00:03:50,760
and inside this reducer we'll first import

73
00:03:50,760 --> 00:03:52,830
our type that we just created.

74
00:03:52,830 --> 00:03:54,973
We'll import CHANGE_AUTH.

75
00:03:58,903 --> 00:04:02,310
I also accidentally only called it authentication, the file.

76
00:04:02,310 --> 00:04:05,010
I'm gonna add on the extension really quick.

77
00:04:05,010 --> 00:04:05,843
There we go.

78
00:04:07,980 --> 00:04:12,980
So we're gonna import this type from up into actions/types,

79
00:04:13,560 --> 00:04:15,993
and then we'll define the reducer itself.

80
00:04:16,860 --> 00:04:21,512
So we'll export default function.

81
00:04:22,710 --> 00:04:25,140
Remember, the first argument to our reducer is state,

82
00:04:25,140 --> 00:04:27,030
and we always need to default our state

83
00:04:27,030 --> 00:04:28,410
to a reasonable value.

84
00:04:28,410 --> 00:04:33,360
So we'll say that by default, our user is not logged in.

85
00:04:33,360 --> 00:04:35,850
So the authentication reducer

86
00:04:35,850 --> 00:04:37,560
is just gonna return a Boolean:

87
00:04:37,560 --> 00:04:39,270
whether or not the user is currently logged in.

88
00:04:39,270 --> 00:04:41,640
It's either gonna be true or false,

89
00:04:41,640 --> 00:04:43,230
and by default, they're gonna start off

90
00:04:43,230 --> 00:04:45,003
as being not logged in.

91
00:04:46,530 --> 00:04:49,020
Our second argument is our action,

92
00:04:49,020 --> 00:04:51,723
and then we'll do our switch over the action's type.

93
00:04:52,950 --> 00:04:56,913
In the case that the action's type is CHANGE_AUTH,

94
00:05:00,480 --> 00:05:04,050
we're just gonna return action.payload.

95
00:05:04,050 --> 00:05:07,170
So this is where that real simplicity is coming in here.

96
00:05:07,170 --> 00:05:08,970
The action creator is just gonna return

97
00:05:08,970 --> 00:05:11,280
whether or not the user should now be logged in.

98
00:05:11,280 --> 00:05:14,670
So if they are, if we get an action creator called

99
00:05:14,670 --> 00:05:17,850
that spawns an action where the payload is true,

100
00:05:17,850 --> 00:05:20,340
then boom, the user is currently logged in.

101
00:05:20,340 --> 00:05:23,190
If action.payload is false, conversely,

102
00:05:23,190 --> 00:05:25,040
the user will suddenly be logged out.

103
00:05:26,550 --> 00:05:29,193
And by default we will return our state.

104
00:05:30,390 --> 00:05:31,530
Now, just one more step.

105
00:05:31,530 --> 00:05:34,290
We need to make sure that this authentication reducer

106
00:05:34,290 --> 00:05:37,170
is wired up to our combineReducers call.

107
00:05:37,170 --> 00:05:41,373
So inside of index.js, inside of our reducers file,

108
00:05:43,650 --> 00:05:48,650
we'll import authenticationReducer from authentication.

109
00:05:52,050 --> 00:05:54,690
And we'll remove the kind of dummy reducer

110
00:05:54,690 --> 00:05:56,313
that we have in here right now,

111
00:05:57,900 --> 00:05:59,790
and we'll call this authenticated,

112
00:05:59,790 --> 00:06:03,843
it's coming from authenticationReducer.

113
00:06:05,310 --> 00:06:07,080
All right, and so that's really all the wiring up

114
00:06:07,080 --> 00:06:08,910
that we need to do inside of our application

115
00:06:08,910 --> 00:06:10,590
on the Redux side.

116
00:06:10,590 --> 00:06:14,730
Again, we added one reducer whose sole purpose

117
00:06:14,730 --> 00:06:18,150
was to return a Boolean representing either

118
00:06:18,150 --> 00:06:21,000
whether or not the user is currently logged in,

119
00:06:21,000 --> 00:06:22,440
and this Boolean will be available

120
00:06:22,440 --> 00:06:25,863
on the state.authenticated piece of state.

121
00:06:26,910 --> 00:06:28,620
We really sped through the implementation

122
00:06:28,620 --> 00:06:31,050
of this action creator, its type

123
00:06:31,050 --> 00:06:32,790
and its reducer inside the section.

124
00:06:32,790 --> 00:06:34,470
Again, I'm really making the assumption

125
00:06:34,470 --> 00:06:36,390
that you are familiar and comfortable

126
00:06:36,390 --> 00:06:38,460
with Redux at this point in time.

127
00:06:38,460 --> 00:06:40,620
If anything that we did here is unclear,

128
00:06:40,620 --> 00:06:42,750
always feel free to drop me an email.

129
00:06:42,750 --> 00:06:44,737
Say, "Hey, I didn't get any of the Redux stuff

130
00:06:44,737 --> 00:06:46,110
"that was happening here."

131
00:06:46,110 --> 00:06:48,910
And I can help you walk through it at any point in time.

132
00:06:50,220 --> 00:06:52,710
So with our reducer, action creator,

133
00:06:52,710 --> 00:06:54,390
and action all put together,

134
00:06:54,390 --> 00:06:56,190
let's continue inside the next section

135
00:06:56,190 --> 00:06:58,770
where we'll hook up our header

136
00:06:58,770 --> 00:07:01,410
and make sure that the button can communicate

137
00:07:01,410 --> 00:07:04,080
whether or not the user is currently signed in.

138
00:07:04,080 --> 00:07:05,030
I'll see you there.