1 00:00:01,170 --> 00:00:02,003 Narrator: In the last section, 2 00:00:02,003 --> 00:00:04,740 we put together our signout action creator. 3 00:00:04,740 --> 00:00:05,730 Now, in that section, 4 00:00:05,730 --> 00:00:08,189 I had said that to remove a piece of information 5 00:00:08,189 --> 00:00:11,010 from local state, we called clearItem, 6 00:00:11,010 --> 00:00:12,810 that was a mistake on my behalf. 7 00:00:12,810 --> 00:00:15,390 I meant to say that it was removeItem. 8 00:00:15,390 --> 00:00:16,950 That's the name of the method. 9 00:00:16,950 --> 00:00:18,840 So if we call removeItem 10 00:00:18,840 --> 00:00:21,660 and we pass in the key that we want to delete, 11 00:00:21,660 --> 00:00:24,660 poof, it'll just be deleted from our local storage. 12 00:00:24,660 --> 00:00:27,543 So again, removeItem, not clearItem. 13 00:00:28,830 --> 00:00:31,440 Now that we have this action creator all put together, 14 00:00:31,440 --> 00:00:35,010 we're gonna go back over to our signout component 15 00:00:35,010 --> 00:00:38,520 and we'll wire that action creator up to this component. 16 00:00:38,520 --> 00:00:41,770 So at the top, I'm going to import the connect helper 17 00:00:43,830 --> 00:00:48,830 from react-redux and I will import star as actions 18 00:00:49,200 --> 00:00:53,283 from up two directories actions folder. 19 00:00:55,110 --> 00:00:58,560 Then down at the bottom, we'll set up our connect helper. 20 00:00:58,560 --> 00:01:00,780 We don't have any map state to props function here. 21 00:01:00,780 --> 00:01:04,170 So as a first argument, I'll pass in null. 22 00:01:04,170 --> 00:01:05,340 And then as a second argument, 23 00:01:05,340 --> 00:01:07,263 I'll pass in all of my actions. 24 00:01:09,300 --> 00:01:11,490 And I'll make sure I get my second set of parentheses 25 00:01:11,490 --> 00:01:12,660 around the signout method, 26 00:01:12,660 --> 00:01:14,760 or excuse me, a signout component as well. 27 00:01:15,840 --> 00:01:18,660 Now inside the signout component itself, 28 00:01:18,660 --> 00:01:22,863 we can define a lifecycle method of componentDidMount. 29 00:01:24,900 --> 00:01:27,540 So the instant this component appears on the screen, 30 00:01:27,540 --> 00:01:32,250 we're gonna call the this.props.signout action creator 31 00:01:32,250 --> 00:01:34,410 and that's going to attempt to sign our user 32 00:01:34,410 --> 00:01:36,420 out of our application entirely 33 00:01:36,420 --> 00:01:39,720 both by removing the authenticated JSON web token 34 00:01:39,720 --> 00:01:41,040 out of our reducer 35 00:01:41,040 --> 00:01:44,313 and by clearing the local storage token key. 36 00:01:45,570 --> 00:01:46,590 So now we can test this out 37 00:01:46,590 --> 00:01:48,900 by going back over to our browser. 38 00:01:48,900 --> 00:01:50,940 I'm already signed out of our application. 39 00:01:50,940 --> 00:01:52,230 So if I try to go to feature, 40 00:01:52,230 --> 00:01:54,540 it redirects me to the root route. 41 00:01:54,540 --> 00:01:57,030 So I'll first get started by signing up for a new account 42 00:01:57,030 --> 00:01:59,193 which will sign me in to the application. 43 00:02:02,070 --> 00:02:04,020 Okay, so I'm now signed in. 44 00:02:04,020 --> 00:02:06,000 And if I click on signout, 45 00:02:06,000 --> 00:02:08,639 I get kicked back to the signout route. 46 00:02:08,639 --> 00:02:10,590 And if I now try to go to feature, 47 00:02:10,590 --> 00:02:13,020 it redirects me back to the root route of the application 48 00:02:13,020 --> 00:02:14,493 'cause I am not signed in. 49 00:02:15,480 --> 00:02:18,390 All right, so I think signout is working perfectly. 50 00:02:18,390 --> 00:02:19,920 Let's continue to the next section 51 00:02:19,920 --> 00:02:21,570 where I think all we have to do now 52 00:02:21,570 --> 00:02:23,970 is start working on our signin form. 53 00:02:23,970 --> 00:02:26,420 So quick break and I'll see you in just a minute.