1
00:00:00,820 --> 00:00:06,170
In the last video we implemented these two callbacks of on sign in and on sign out we made sure that

2
00:00:06,170 --> 00:00:10,880
we called both those anytime the user clicked on either the sign out button or the sign in button right

3
00:00:10,880 --> 00:00:11,470
here.

4
00:00:11,690 --> 00:00:16,160
Now at the end of the last video I was looking at both these callback methods we just put together and

5
00:00:16,160 --> 00:00:19,300
I realized that the naming of them is really unclear.

6
00:00:19,490 --> 00:00:22,190
They're named on sign in and on sign out.

7
00:00:22,190 --> 00:00:26,660
I don't know about you but when I see the term on seinen it makes me think that the user just successfully

8
00:00:26,660 --> 00:00:27,440
signed in.

9
00:00:27,710 --> 00:00:32,090
But that is not the intent of this cold act function right here on CNN is supposed to be called when

10
00:00:32,090 --> 00:00:35,140
the user is attempting to first sign it.

11
00:00:35,150 --> 00:00:38,990
And so in order to make that a little bit more clear I think that we should probably change the name

12
00:00:39,020 --> 00:00:40,670
of both these event handlers.

13
00:00:40,840 --> 00:00:46,280
So I don't change on SIGN INTO on sign in click and on sign out to on sign out.

14
00:00:46,280 --> 00:00:47,210
Click.

15
00:00:47,210 --> 00:00:50,090
So the idea here is that this name is a little bit more descriptive.

16
00:00:50,090 --> 00:00:54,150
This is a function that is going to be called when the sign in button is clicked.

17
00:00:54,990 --> 00:00:56,530
There is no functional change here.

18
00:00:56,540 --> 00:01:01,880
Again it's just to communicate the functionality to other engineers who might work on our project.

19
00:01:01,880 --> 00:01:06,550
Now since we updated these event handler names we need to make sure that we update the references down

20
00:01:06,590 --> 00:01:08,240
in both the buttons as well.

21
00:01:08,240 --> 00:01:11,850
So I'm going to change this to on sign out click and on sign in.

22
00:01:11,870 --> 00:01:14,320
Click Like so OK.

23
00:01:14,340 --> 00:01:19,380
So now in this video we're going to continue by talking about how this component our Google component

24
00:01:19,620 --> 00:01:24,900
is going to play around with redux because we have not yet integrated redux into our application so

25
00:01:24,900 --> 00:01:29,790
I'm going to show you two different possible ways in which we might integrate this Google authentication

26
00:01:29,790 --> 00:01:31,340
with redux.

27
00:01:31,340 --> 00:01:32,430
All right.

28
00:01:32,430 --> 00:01:34,020
So here's the first way.

29
00:01:34,050 --> 00:01:38,160
The first way that I'm showing you right here is essentially going to leave our Google off component

30
00:01:38,400 --> 00:01:40,780
for the most part untouched.

31
00:01:40,780 --> 00:01:46,640
Now this way that I'm showing you right here is not closely following the conventions of redux.

32
00:01:46,680 --> 00:01:51,630
So I would say that if we wanted to 100 percent follow redux conventions this might not be the best

33
00:01:51,630 --> 00:01:52,800
approach.

34
00:01:52,800 --> 00:01:57,030
The reason we're going to take this approach right here is that at the end of this project you're going

35
00:01:57,030 --> 00:01:58,910
to end up with a single component.

36
00:01:59,000 --> 00:02:04,890
This Google component that shows you the entire process with Google from start to finish and that's

37
00:02:04,890 --> 00:02:06,090
what I really want you to have.

38
00:02:06,090 --> 00:02:10,920
I want you to have a component that shows you from start to finish how to set up Google off.

39
00:02:10,920 --> 00:02:16,320
So even though this is not super optimal it's still going to leave you with a single reference for hey

40
00:02:16,350 --> 00:02:16,920
here's how.

41
00:02:16,920 --> 00:02:18,580
Here is how it works.

42
00:02:18,750 --> 00:02:18,970
OK.

43
00:02:18,980 --> 00:02:24,930
So let's walk to this flow and I'll show you an alternate flow that more closely follows redux conventions.

44
00:02:25,920 --> 00:02:26,120
All right.

45
00:02:26,120 --> 00:02:31,440
So inside of our component we've got on signing click and on sign out click whenever we call those We're

46
00:02:31,440 --> 00:02:37,800
going to essentially be accessing the off to instance and that's going to start either the sign in flow

47
00:02:37,830 --> 00:02:39,590
or the sign outflow.

48
00:02:39,660 --> 00:02:45,750
Either way this library is going to eventually call our on of change inside of our class or inside of

49
00:02:45,750 --> 00:02:50,450
our Google Earth component in order to integrate redux into this flow.

50
00:02:50,580 --> 00:02:55,290
We're going to make sure that any time that on off change is called we call some appropriate action

51
00:02:55,290 --> 00:02:56,010
creator.

52
00:02:56,010 --> 00:03:01,370
So either an action creator called something like sign in or something called Sign out.

53
00:03:01,410 --> 00:03:05,460
Now these two action creators right here are going to be called any time that the user successfully

54
00:03:05,460 --> 00:03:07,890
signs in or successfully signs out.

55
00:03:07,900 --> 00:03:13,140
So remember just a moment ago I had said oh yeah the name on sign in or on sign out was kind of unclear

56
00:03:13,170 --> 00:03:18,540
because it wasn't clear if that was the user completing the sign in process or starting the sign in

57
00:03:18,540 --> 00:03:19,270
process.

58
00:03:19,380 --> 00:03:24,450
So these action creators their intent is to be called once the user has successfully signed in or successfully

59
00:03:24,450 --> 00:03:25,980
signed out.

60
00:03:25,980 --> 00:03:28,950
So when we call this action creators they will return in action.

61
00:03:28,980 --> 00:03:33,830
That's going to show up inside of a new reducer that's going to be called something like our reducer.

62
00:03:34,020 --> 00:03:38,370
This author reducers probably going to be an object or something like that that is going to hold a simple

63
00:03:38,400 --> 00:03:43,270
boolean value that reflects whether or not the user is currently signed in or signed out.

64
00:03:43,320 --> 00:03:47,940
Now you might be kind of curious why are we going to reflect whether the user is signed in or signed

65
00:03:47,940 --> 00:03:49,560
out inside of a redux store.

66
00:03:49,590 --> 00:03:53,140
Because we are already recording that inside of our Google off component.

67
00:03:53,340 --> 00:03:55,940
Well the reason for this is simple.

68
00:03:56,090 --> 00:04:01,140
Right now only our Google component knows whether the user is signed in or signed out.

69
00:04:01,310 --> 00:04:06,530
That is really inconvenient for a lot of things that we want to eventually do inside of application.

70
00:04:06,530 --> 00:04:11,660
Eventually we are going to have entire screens and different components that are going to function very

71
00:04:11,660 --> 00:04:15,280
differently depending upon whether the user is signed in or signed out.

72
00:04:15,370 --> 00:04:20,060
And so we need to make sure that we have the facts of whether the user is signed in or signed out in

73
00:04:20,060 --> 00:04:24,070
some very centrally accessible location inside of our app.

74
00:04:24,560 --> 00:04:27,920
Having that inside this component is not centrally accessible.

75
00:04:27,920 --> 00:04:32,660
It would be very challenging for other components to somehow reach into this component and figure out

76
00:04:32,690 --> 00:04:34,950
if that user is signed in or signed out.

77
00:04:34,970 --> 00:04:39,440
So rather than leaving the state of whether the user is signed in or signed out inside this component

78
00:04:39,470 --> 00:04:43,640
alone we're going to instead move that to our retail store.

79
00:04:43,750 --> 00:04:48,840
So the redux store is going to have a boolean flag inside of it either true or false or no.

80
00:04:48,860 --> 00:04:53,660
If we don't know if the user is signed in at any given time that's going to reflect whether that user

81
00:04:53,660 --> 00:04:55,670
is signed in or signed out.

82
00:04:55,670 --> 00:04:58,820
This is going to lead to some kind of weird things.

83
00:04:58,840 --> 00:05:03,950
However I want you to know that right now we don't want to reflect whether the user is signed in in

84
00:05:04,040 --> 00:05:05,230
multiple locations.

85
00:05:05,240 --> 00:05:10,500
We really want to reflect whether they are signed in or signed out and only one spot inside of our app.

86
00:05:10,550 --> 00:05:14,660
And so we're going to make that the redux store but then the side effect of that is that our Google

87
00:05:14,660 --> 00:05:18,930
off component needs to know whether to show the sign or the sign out button.

88
00:05:19,040 --> 00:05:24,050
And it only knows which one to show depending upon whether or not the user is signed in or signed out.

89
00:05:24,380 --> 00:05:29,510
So we're going to make sure that the redux store communicates whether the user is signed in or signed

90
00:05:29,510 --> 00:05:33,840
out as a prop Drew that map stage props function down to google off.

91
00:05:34,070 --> 00:05:40,460
So the reason that I say that that this is kind of awkward is that right now this component has component

92
00:05:40,460 --> 00:05:43,160
level state that says whether or not the user is signed in.

93
00:05:43,160 --> 00:05:47,600
And so I'm now telling you that essentially we're going to take this little piece right here or this

94
00:05:47,600 --> 00:05:52,220
little piece of state that says whether or not the user is signed in and move it into the reducer and

95
00:05:52,220 --> 00:05:57,500
then go through a ton of like you know all the map state to props all the connect function all that

96
00:05:57,530 --> 00:06:02,900
nasty stuff just to get this simple boolean or no value back into the component.

97
00:06:02,900 --> 00:06:05,050
And so that's what I find is kind of awkward.

98
00:06:05,090 --> 00:06:10,160
We're going to remove some piece of data that is already into the component into some other location

99
00:06:10,160 --> 00:06:15,330
that is way harder to get access to just to get it back inside the component anyways.

100
00:06:15,530 --> 00:06:19,730
Now again the reason that we are doing this is to make sure that other components can very easily read

101
00:06:19,730 --> 00:06:20,670
this data as well.

102
00:06:20,690 --> 00:06:26,420
Nonetheless it will feel a little bit awkward when it comes back to refactoring the Google off component.

103
00:06:26,810 --> 00:06:27,070
OK.

104
00:06:27,080 --> 00:06:32,210
So that's kind of my spiel around how we're going to do some of the redux design around this component.

105
00:06:32,390 --> 00:06:38,520
Now I want to show you an alternate way of designing our story here in designing the red oxide the application.

106
00:06:38,540 --> 00:06:42,950
Now this other way I'm going to show you like I said is following redux conventions a little bit more

107
00:06:42,950 --> 00:06:48,980
closely but it's also going to spread a lot of our authentication logic out all over our application.

108
00:06:48,980 --> 00:06:54,230
And so if you want to reference this Google stuff in the future it would be a lot harder to figure out

109
00:06:54,230 --> 00:06:57,880
the entire flow if you use this other approach like so

110
00:07:00,740 --> 00:07:01,230
OK.

111
00:07:01,360 --> 00:07:08,980
So in this approach the general idea is that we want to have our action creators always responsible

112
00:07:08,980 --> 00:07:13,990
for changing the state of our application at present with this flow.

113
00:07:14,110 --> 00:07:18,460
We are Google off composed right here is responsible for changing the state of our app.

114
00:07:18,490 --> 00:07:24,880
Like truthfully it really is because this component is accessing the API to object right here.

115
00:07:25,000 --> 00:07:29,900
And this object right here kind of is a part of state of our application.

116
00:07:30,050 --> 00:07:33,520
So it's not really best practice to have a component manage state like that.

117
00:07:33,530 --> 00:07:38,270
But again we're going to take that approach instead it would be a little bit better approach to have

118
00:07:38,270 --> 00:07:42,750
our action creators manage access to that API object instead.

119
00:07:43,100 --> 00:07:47,150
So in this approach we would still have a Google off component and it would still have some callback

120
00:07:47,150 --> 00:07:49,980
functions like on sign and click or on sign click.

121
00:07:50,240 --> 00:07:55,670
Anytime someone invokes one of those callback functions we would call inappropriate action creator something

122
00:07:55,670 --> 00:07:58,700
named like try sign in or try sign out.

123
00:07:58,700 --> 00:08:02,750
Now the reason I named these Try sign in and try sign out is to make sure that it's clear that these

124
00:08:02,750 --> 00:08:06,500
are going to attempt to sign the user in or attempt to sign the user out.

125
00:08:06,520 --> 00:08:10,660
Is the start or the beginning of the authentication process.

126
00:08:11,800 --> 00:08:16,610
So these action creators would essentially called this API auth to object right here.

127
00:08:16,780 --> 00:08:21,550
And then once the user is either signed in or signed out successfully the API object is still going

128
00:08:21,550 --> 00:08:25,530
to call some callback function called something like change off.

129
00:08:25,750 --> 00:08:27,730
And this would also be an action creator.

130
00:08:27,730 --> 00:08:32,710
Change Auth. right here would be essentially equivalent to our current onchange auth function right

131
00:08:32,710 --> 00:08:33,200
here.

132
00:08:34,230 --> 00:08:39,600
So any time that the user successfully signs in or signs out change Auth. would be called that would

133
00:08:39,600 --> 00:08:44,730
dispatch an action that would update our piece of state and then just before as in the last diagram

134
00:08:44,990 --> 00:08:49,800
our redux store would communicate whether or not the user is signed in or signed out through Mount St.

135
00:08:49,800 --> 00:08:53,330
to prop's down to our Google off component okay.

136
00:08:53,340 --> 00:08:59,030
Like I said this is a alternate approach that would follow conventions of redux a little bit more closely

137
00:08:59,070 --> 00:09:04,710
because it is blocking access to the API object right here behind our action creators at the end of

138
00:09:04,710 --> 00:09:08,710
the day it's really not a big difference at all.

139
00:09:08,760 --> 00:09:13,860
I just wanted you to be aware that we could have taken this alternate approach and probably done just

140
00:09:13,860 --> 00:09:15,230
as well as what we're doing.

141
00:09:15,570 --> 00:09:15,820
OK.

142
00:09:15,840 --> 00:09:18,990
So now that we understand the general idea here let's take a quick pause.

143
00:09:18,990 --> 00:09:23,520
When we come back the next video we're going to start wiring redux up to our project and implementing

144
00:09:23,520 --> 00:09:26,760
these action creators and some 3DO as well.

145
00:09:26,940 --> 00:09:28,980
So quick break and I'll see you in just a minute.