1
00:00:00,980 --> 00:00:07,240
We're now calling the appropriate action creator any time that our state changes according to the API

2
00:00:07,250 --> 00:00:11,690
library in this video we're now going to start working on douceur that's going to record whether or

3
00:00:11,690 --> 00:00:14,520
not the user is signed in at any given point in time.

4
00:00:14,520 --> 00:00:19,640
Now remember the entire idea behind recording the authentication status inside of our redock store is

5
00:00:19,640 --> 00:00:24,690
to make sure that the authentication status is available to other components were other screens inside

6
00:00:24,690 --> 00:00:30,050
of application if we had stuck with the approach we have before where only the Google component knew

7
00:00:30,050 --> 00:00:34,550
whether or not the user was signed in that it would be really challenging for other components to understand

8
00:00:34,760 --> 00:00:38,230
whether or not they should treat the user as being signed in or signed out.

9
00:00:38,570 --> 00:00:38,850
OK.

10
00:00:38,870 --> 00:00:45,150
So are going to close down all the files I have open and then I'll open up my reducers directory and

11
00:00:45,150 --> 00:00:48,570
inside there are going to make a new file called off reducer.

12
00:00:48,690 --> 00:00:50,660
Yes.

13
00:00:50,720 --> 00:00:54,440
And then inside of here we'll put together some boiler plate or a reducer.

14
00:00:54,630 --> 00:00:57,790
So I'm going to have a function that gets called with some state objects.

15
00:00:57,830 --> 00:01:04,250
Going to default this to be an object as opposed to just a boolean flag and also have some action property

16
00:01:05,440 --> 00:01:10,920
and they might be curious why are we using a default value of a object as opposed to just like true

17
00:01:10,930 --> 00:01:11,970
false or null.

18
00:01:12,150 --> 00:01:16,710
Well in truth we're going to eventually have one other property related to authentication and you'll

19
00:01:16,710 --> 00:01:18,520
see what that isn't just a little bit.

20
00:01:18,540 --> 00:01:23,610
So in addition to having just some like true or false or no value to indicate whether or not the user

21
00:01:23,610 --> 00:01:26,790
signed in we're going to have some other piece of data inside of here as well.

22
00:01:26,790 --> 00:01:30,970
And the easiest way to arrange all this data is to make use of an object.

23
00:01:30,990 --> 00:01:35,940
Now this object right here I expect to eventually have some property inside of it called something like

24
00:01:36,000 --> 00:01:37,210
is signed in.

25
00:01:37,350 --> 00:01:40,760
And we probably want to start off with that property be an asset to know.

26
00:01:41,010 --> 00:01:47,010
So in order to default the argument of state in this case or in order to initialize it I'm actually

27
00:01:47,010 --> 00:01:50,050
going to create a initialiser up here.

28
00:01:50,060 --> 00:01:57,930
It's going to make a new variable called initial state and then inside if you're going to put the initial

29
00:01:57,930 --> 00:01:59,970
value for my state object.

30
00:01:59,970 --> 00:02:06,340
So I WANT IT TO HAVE A is signed in property and I wanted to be defaulted or initialized to No.

31
00:02:06,720 --> 00:02:10,860
So now when we default the value state right here rather than assigning it a completely empty object

32
00:02:11,100 --> 00:02:15,330
I'm going to assign it initial state.

33
00:02:15,450 --> 00:02:20,300
Remember the idea here with the default argument when our redux application first boots up are reduced

34
00:02:20,320 --> 00:02:22,880
or it gets called one time to initialize it.

35
00:02:23,150 --> 00:02:29,060
If this producer gets called with a first argument value of undefined then state will be set equal to

36
00:02:29,120 --> 00:02:31,250
whatever value we put right here.

37
00:02:31,250 --> 00:02:36,920
So in order to get a initial value that has an object with the property inside of it of null I'm going

38
00:02:36,920 --> 00:02:41,750
to just to find the object up here ahead of time and then set the default value right there.

39
00:02:42,110 --> 00:02:47,720
Just you know I have a variable name here that is all capitalized to make sure that it's really clear

40
00:02:47,720 --> 00:02:53,000
to other engineers that this is supposed to be a true constant object and we should never change any

41
00:02:53,000 --> 00:02:54,920
of the values inside of it.

42
00:02:54,920 --> 00:02:59,630
We usually indicate that by making use of this capitalized syntax so the capitalized syntax means do

43
00:02:59,630 --> 00:03:03,860
not try to modify this object under any circumstance whatsoever.

44
00:03:05,410 --> 00:03:12,220
OK so now inside of a producer we're going to add a switch over our action type and we'll have a case

45
00:03:12,490 --> 00:03:14,550
of what was it.

46
00:03:14,560 --> 00:03:23,570
Let's check our actions file we have a case of sign in and a case of sign out so sign in and a case

47
00:03:23,570 --> 00:03:30,190
of sign out and I also put in my default case in which I will return my state object.

48
00:03:30,560 --> 00:03:38,630
So now in the case of sign in I want to take my state object I want to update or modify a property inside

49
00:03:38,630 --> 00:03:39,230
of it.

50
00:03:39,230 --> 00:03:44,690
Remember anytime you want to modify a property we're going to use that spread syntax that dot dot dot.

51
00:03:44,920 --> 00:03:47,430
So I going to create an entirely new object here.

52
00:03:47,690 --> 00:03:53,150
I'm going to take all the values out of my state argument and put it into that new object and then I'm

53
00:03:53,150 --> 00:03:57,190
going to also update the is signed in property as well.

54
00:03:57,200 --> 00:03:59,110
And I'm going to update that to be true.

55
00:04:00,360 --> 00:04:02,850
It's now it can do the same thing with sign out as well.

56
00:04:03,730 --> 00:04:11,080
So I will return dot dot dot state is signed out and this case we are no longer signed in because we

57
00:04:11,080 --> 00:04:11,870
just signed out.

58
00:04:11,920 --> 00:04:13,190
So we're going to update is signed.

59
00:04:13,210 --> 00:04:16,620
It's signed in to be false.

60
00:04:16,630 --> 00:04:18,780
Like so OK.

61
00:04:18,820 --> 00:04:19,920
That's pretty much it.

62
00:04:19,920 --> 00:04:25,810
So I'm going to save this producer and then going to flip over to the reducers index file.

63
00:04:25,960 --> 00:04:27,860
I will import that reduce or at the top.

64
00:04:27,950 --> 00:04:35,050
So Auth. reducer from author reducer and then I'm going to assign that to a key on my state object of

65
00:04:35,090 --> 00:04:36,650
art reducer.

66
00:04:36,960 --> 00:04:37,190
So

67
00:04:40,820 --> 00:04:42,100
all right so this looks pretty good.

68
00:04:42,110 --> 00:04:47,360
Now once again I'm going to flip on over to my browser and just do a quick refresh try clicking the

69
00:04:47,360 --> 00:04:50,380
button and make sure I don't see any error message or anything like that.

70
00:04:50,390 --> 00:04:51,910
So looks pretty good to me.

71
00:04:51,910 --> 00:04:53,410
So let's take a quick pause right here.

72
00:04:53,480 --> 00:04:57,330
The last thing we're going to do is kind of close the loop here so to speak.

73
00:04:57,350 --> 00:05:01,850
So we're now recording our authentication status inside of a redux store where we need to make sure

74
00:05:01,850 --> 00:05:07,190
that our Google component either shows the sign in or sign out button depending upon whether or not

75
00:05:07,190 --> 00:05:08,500
these are signed in.

76
00:05:08,510 --> 00:05:13,790
The last thing we do is communicate that state back over to the Google off component.

77
00:05:13,790 --> 00:05:15,980
So quick break and I'll see you in just a minute.