1 00:00:00,760 --> 00:00:04,510 In the section we're going to continue working on the redux side of our application by setting up some 2 00:00:04,510 --> 00:00:08,500 action creators and then wiring them up to our Google component. 3 00:00:08,530 --> 00:00:12,350 So inside of my actions directory I'm going to open up my index file. 4 00:00:12,550 --> 00:00:17,920 So inside of here we want to eventually have two action creators one called Sign in and one called sign 5 00:00:17,920 --> 00:00:21,700 out these are going to be extremely straightforward action creators. 6 00:00:21,790 --> 00:00:26,530 We're only going to call them after we have successfully either logged user in or logged the user out 7 00:00:26,770 --> 00:00:29,070 through the API library. 8 00:00:29,080 --> 00:00:37,790 So inside of my index as file I'm going to define a action creator called Sign in and inside this thing 9 00:00:37,850 --> 00:00:43,450 I'm going to return an object and it will have a type of sign in. 10 00:00:44,090 --> 00:00:46,310 And that's pretty much it. 11 00:00:46,310 --> 00:00:50,990 So we're going to eventually have a Auth. reducer or something with that particular name or something 12 00:00:50,990 --> 00:00:51,850 similar to it. 13 00:00:51,950 --> 00:00:57,680 Anytime that it sees a action of type sign in it will probably have some internal boolean flag that 14 00:00:57,710 --> 00:01:00,100 updates the sign in status to true. 15 00:01:00,260 --> 00:01:01,150 That's pretty much it. 16 00:01:01,960 --> 00:01:07,690 So we'll also have a nother action creator called sign out and this one will basically have the exact 17 00:01:07,690 --> 00:01:16,060 same opposite effect so all return an object with that type of sign outs. 18 00:01:16,210 --> 00:01:20,300 And now any time that our author reduces that we'll eventually put together CS that action. 19 00:01:20,320 --> 00:01:24,300 It's going to flip that boolean flag of whether or not these are signed into false. 20 00:01:24,340 --> 00:01:29,380 So pretty straightforward on the creator side let's don't hook these up to our Google off component 21 00:01:29,590 --> 00:01:31,410 using the reactor redux library. 22 00:01:31,810 --> 00:01:35,050 So I'm going to flip back over to the Google file at the top. 23 00:01:35,050 --> 00:01:45,050 I'm going to import connect and I'll also import my two action creators of sign in and sign out from 24 00:01:45,620 --> 00:01:51,880 up one directory actions like so and then we'll hook all this stuff up at the bottom of the file. 25 00:01:51,910 --> 00:01:55,400 So down here at the bottom I'll find my export default. 26 00:01:55,400 --> 00:01:59,030 I'm going to wrap it with the second set parentheses have a connect call. 27 00:01:59,150 --> 00:02:04,520 At present we don't have a map state to prop's functional personal as the first argument and then as 28 00:02:04,520 --> 00:02:12,660 the second argument I'll put an OT option is to be an object in which sign in and sign out. 29 00:02:12,690 --> 00:02:16,680 All right so now inside of our component we need to make sure that once the user successfully signs 30 00:02:16,680 --> 00:02:20,670 in or signs out we call the appropriate action creator. 31 00:02:20,700 --> 00:02:24,840 So I'm going to find my on off change callback. 32 00:02:24,840 --> 00:02:31,340 Remember we wired this thing up to the Google API library with the is signed entlassen colorant year. 33 00:02:31,380 --> 00:02:36,540 So this function is going to be called Anytime that our authentication status changes according to the 34 00:02:36,540 --> 00:02:38,100 Google API. 35 00:02:38,160 --> 00:02:43,260 Now at present we are getting whether or not the user is signed in from a call to this dot dot is signed 36 00:02:43,260 --> 00:02:44,210 in get. 37 00:02:44,520 --> 00:02:49,740 In reality I didn't mention this at the time but this callback function right here actually gets called 38 00:02:49,800 --> 00:02:56,110 with a boolean argument of either true or false to indicate whether or not the user is signed in. 39 00:02:56,130 --> 00:03:00,330 So we don't actually have to reach back into the odd instance and call the is signed in get. 40 00:03:00,450 --> 00:03:02,970 We can instead just receive it as an argument. 41 00:03:03,060 --> 00:03:06,390 So I'm going to receive that as an argument called is signed in 42 00:03:09,600 --> 00:03:10,960 next inside this function. 43 00:03:10,980 --> 00:03:14,970 We no longer want to have any component level state that is keeping track of whether or not the user 44 00:03:14,970 --> 00:03:15,810 is signed in. 45 00:03:16,050 --> 00:03:20,570 So I'm going to remove the entire set state call and I'll replace it with an if statement. 46 00:03:20,820 --> 00:03:27,720 So I'll say if is signed in is equal to true and we want to call our action creator this Propst not 47 00:03:27,810 --> 00:03:30,600 sign in otherwise. 48 00:03:30,620 --> 00:03:39,890 So L's case will say this stock props that sign out like so and that's pretty much it right there. 49 00:03:39,910 --> 00:03:40,260 All right. 50 00:03:40,270 --> 00:03:42,190 So let's flip back over your browser. 51 00:03:42,220 --> 00:03:44,770 I want to very quickly just test out this code. 52 00:03:44,770 --> 00:03:47,500 Now we're not going to see any impact or any change on here. 53 00:03:47,530 --> 00:03:51,700 In fact we're not even see any updates the button any more because we are no longer updating the state 54 00:03:51,700 --> 00:03:52,900 inside of our component. 55 00:03:53,080 --> 00:03:57,010 Nonetheless I just want to make sure that we don't have any error messages or anything like that when 56 00:03:57,010 --> 00:03:59,110 we change our authentication state. 57 00:03:59,200 --> 00:04:05,700 So back inside the browser I will refresh the page and then attempt to sign an so I click that button 58 00:04:06,480 --> 00:04:11,280 and then we don't see anything occur again that is totally fine if you have the sign out button up there 59 00:04:11,280 --> 00:04:12,480 right now because you are signed. 60 00:04:12,490 --> 00:04:15,260 Or if you sign up on because you are signed in. 61 00:04:15,390 --> 00:04:16,740 You can click the sign out button. 62 00:04:16,740 --> 00:04:18,510 And again you just don't want to see an error message. 63 00:04:18,510 --> 00:04:21,050 That's all we're checking for right now. 64 00:04:21,060 --> 00:04:23,820 Now I don't see any error message which means we are doing pretty well. 65 00:04:23,820 --> 00:04:27,970 So we're going to take a quick pause right here in the next video we're going to start working on in 66 00:04:28,190 --> 00:04:28,930 3DO sir. 67 00:04:28,950 --> 00:04:31,980 That is going to record whether or not our user is signed in. 68 00:04:31,980 --> 00:04:34,140 So quick break and I'll see you in just a minute.