1 00:00:01,320 --> 00:00:02,511 -: In the last section we added two routes 2 00:00:02,511 --> 00:00:04,890 to our app.js file. 3 00:00:04,890 --> 00:00:07,590 At this point, we've got these two routes inside of here, 4 00:00:07,590 --> 00:00:08,910 and we can navigate between them 5 00:00:08,910 --> 00:00:12,213 by manually changing the URL inside of our browser. 6 00:00:13,170 --> 00:00:14,940 There's a couple of different ways 7 00:00:14,940 --> 00:00:16,800 we can take this application from here. 8 00:00:16,800 --> 00:00:17,970 We can either start working 9 00:00:17,970 --> 00:00:20,700 on the idea of authentication inside of our app, 10 00:00:20,700 --> 00:00:23,520 which is going to involve creating another reducer, 11 00:00:23,520 --> 00:00:25,500 or we can start putting together some of the links 12 00:00:25,500 --> 00:00:28,050 inside the app component that are going to display 13 00:00:28,050 --> 00:00:30,685 at the very top, and allow the user to navigate 14 00:00:30,685 --> 00:00:34,200 between all the different routes of our application. 15 00:00:34,200 --> 00:00:36,930 I think maybe we should tackle the Redux side very quickly 16 00:00:36,930 --> 00:00:39,840 'cause that's gonna be a pretty straightforward side. 17 00:00:39,840 --> 00:00:42,330 All right, so as a quick reminder, this idea 18 00:00:42,330 --> 00:00:45,930 of authentication is gonna be a simple boolean 19 00:00:45,930 --> 00:00:48,060 that is stored inside of our Redux store. 20 00:00:48,060 --> 00:00:51,390 There's no email, there's no password, nothing like that. 21 00:00:51,390 --> 00:00:53,550 If a user clicks on sign in right here, poof, 22 00:00:53,550 --> 00:00:55,847 they're going to be magically authenticated 23 00:00:55,847 --> 00:00:58,410 by us just flipping some flag inside 24 00:00:58,410 --> 00:01:00,630 of our Redux store from false to true. 25 00:01:00,630 --> 00:01:01,920 That's it. 26 00:01:01,920 --> 00:01:03,780 So with that mind, we'll first get started 27 00:01:03,780 --> 00:01:05,790 by creating a reducer to store 28 00:01:05,790 --> 00:01:08,236 whether or not a user is signed in. 29 00:01:08,236 --> 00:01:10,507 So inside my reducer directory 30 00:01:10,507 --> 00:01:14,340 I'm gonna make a new file called auth.js. 31 00:01:14,340 --> 00:01:16,233 This is short for authentication. 32 00:01:18,480 --> 00:01:20,640 Then inside of here we'll put together some boiler plate 33 00:01:20,640 --> 00:01:23,130 for a normal reducer. 34 00:01:23,130 --> 00:01:28,130 So I'll say export default function, state, action, 35 00:01:30,330 --> 00:01:33,753 and then we'll have our switch statement on action.type. 36 00:01:34,830 --> 00:01:38,430 We'll have our default case where we just return our state, 37 00:01:38,430 --> 00:01:41,220 and that's pretty much it for the boiler plate. 38 00:01:41,220 --> 00:01:42,750 Now we need to think about the state 39 00:01:42,750 --> 00:01:44,250 that this reducer is going to store, 40 00:01:44,250 --> 00:01:47,250 or the type of data that it's going to store. 41 00:01:47,250 --> 00:01:49,650 So again, the auth. reducer's purpose is really 42 00:01:49,650 --> 00:01:51,510 just to store a boolean value, 43 00:01:51,510 --> 00:01:54,270 true meaning that the user is logged in false 44 00:01:54,270 --> 00:01:56,550 meaning the user is not logged in. 45 00:01:56,550 --> 00:01:59,100 So for our default state right here, I'm gonna say 46 00:01:59,100 --> 00:02:02,549 that we're going to default the value to be false. 47 00:02:02,549 --> 00:02:06,033 So by default, a user is not signed into our application. 48 00:02:07,320 --> 00:02:10,740 Okay, so reducers is not too bad here. 49 00:02:10,740 --> 00:02:11,820 We're gonna come back to this thing 50 00:02:11,820 --> 00:02:15,030 in just a second, and add in a case to the switch statement. 51 00:02:15,030 --> 00:02:16,800 But for now, let's flip back over 52 00:02:16,800 --> 00:02:19,778 to our actions directory and we'll make a new type, 53 00:02:19,778 --> 00:02:22,860 and a new action creator that will allow a user 54 00:02:22,860 --> 00:02:25,230 to toggle, or allow you and I for that matter, 55 00:02:25,230 --> 00:02:28,083 to toggle whether or not a user is signed in. 56 00:02:29,490 --> 00:02:31,380 So in inside my types.js file 57 00:02:31,380 --> 00:02:34,410 I'll first create a new type called export, 58 00:02:34,410 --> 00:02:36,480 well, not called export, 59 00:02:36,480 --> 00:02:39,783 but we'll call it change_auth like so. 60 00:02:41,580 --> 00:02:43,860 So the idea here is that anytime we see an action 61 00:02:43,860 --> 00:02:47,038 with type change_auth, we're going to try to flip the value 62 00:02:47,038 --> 00:02:49,233 of that authentication field. 63 00:02:50,910 --> 00:02:52,560 Now that we've got the type, we'll open up 64 00:02:52,560 --> 00:02:55,740 our index.js file in the actions directory, 65 00:02:55,740 --> 00:02:59,100 and make a new action creator as well. 66 00:02:59,100 --> 00:03:02,375 At the very top we'll import that type that we just created. 67 00:03:02,375 --> 00:03:05,463 So change_auth like so, 68 00:03:07,440 --> 00:03:08,640 and then down at the bottom 69 00:03:08,640 --> 00:03:10,503 we'll make the action creator itself. 70 00:03:12,143 --> 00:03:14,370 So we'll export a function called 71 00:03:14,370 --> 00:03:17,250 about just simply changeAuth. 72 00:03:17,250 --> 00:03:19,800 The action creator itself is not going to really know 73 00:03:19,800 --> 00:03:22,770 whether, or not we are trying to flip the user to 74 00:03:22,770 --> 00:03:25,530 be true, logged in or false, not logged in. 75 00:03:25,530 --> 00:03:28,140 So we'll just rely upon changeAuth right here 76 00:03:28,140 --> 00:03:30,390 receiving some argument that tells us whether, 77 00:03:30,390 --> 00:03:33,180 or not we are trying to sign in or not. 78 00:03:33,180 --> 00:03:36,080 So we will receive an argument right here called something 79 00:03:37,081 --> 00:03:39,210 like isLoggedIn, to indicate whether, 80 00:03:39,210 --> 00:03:41,960 or not the user should be logged in to the application, 81 00:03:42,870 --> 00:03:45,450 and then inside the Action creator itself we'll return 82 00:03:45,450 --> 00:03:48,990 in action with type change_auth. 83 00:03:48,990 --> 00:03:49,830 That's the name, right? 84 00:03:49,830 --> 00:03:53,650 Yep. Change_auth, and a payload property 85 00:03:54,930 --> 00:03:56,210 of isLoggedIn. 86 00:03:59,610 --> 00:04:01,410 So now that we've got this action creator put together, 87 00:04:01,410 --> 00:04:02,940 and our type, let's go back over 88 00:04:02,940 --> 00:04:06,270 to the reducer very quickly, and we can use this payload 89 00:04:06,270 --> 00:04:08,280 of whether or not the user should be logged in 90 00:04:08,280 --> 00:04:12,090 to flip that reducer's understanding of 91 00:04:12,090 --> 00:04:13,770 whether or not the user is actually logged in. 92 00:04:13,770 --> 00:04:15,030 That was an awkward way of putting that, 93 00:04:15,030 --> 00:04:16,769 but I think you know what I'm getting at here. 94 00:04:16,769 --> 00:04:19,980 So we're gonna go back over to our auth.js file. 95 00:04:19,980 --> 00:04:22,830 At the top, we will import that new type we just created, 96 00:04:24,870 --> 00:04:28,443 change_auth from actions types. 97 00:04:29,310 --> 00:04:31,983 Then we'll add in our case of change_auth, 98 00:04:34,470 --> 00:04:37,560 and whatever comes across on that action.payload 99 00:04:37,560 --> 00:04:40,020 is what we're going to return from this reducer. 100 00:04:40,020 --> 00:04:43,323 So I will return action.payload. 101 00:04:44,220 --> 00:04:46,140 So now when we call that action creator 102 00:04:46,140 --> 00:04:47,820 it's gonna be critical that we pass 103 00:04:47,820 --> 00:04:49,857 in either true or false to reflect 104 00:04:49,857 --> 00:04:52,083 whether or not our user should be signed in. 105 00:04:53,160 --> 00:04:54,540 All right, I think that's pretty much it 106 00:04:54,540 --> 00:04:56,280 for the Redux side, this application. 107 00:04:56,280 --> 00:04:57,810 So let's take a quick pause right here. 108 00:04:57,810 --> 00:04:59,070 We'll come back in the next section, 109 00:04:59,070 --> 00:05:01,440 and start wiring this new action creator, 110 00:05:01,440 --> 00:05:03,540 and the reducer up to the rest of our app.