1 00:00:00,870 --> 00:00:03,000 -: Let's get started with our application. 2 00:00:03,000 --> 00:00:03,990 I'm gonna pull the mock up 3 00:00:03,990 --> 00:00:06,540 that we were just looking at back up on the screen. 4 00:00:08,010 --> 00:00:10,110 So this is the application that we're going to build. 5 00:00:10,110 --> 00:00:13,050 Remember, we've got a list of users 6 00:00:13,050 --> 00:00:15,630 and a, someone who's using this app right here 7 00:00:15,630 --> 00:00:18,690 should be able to see a profile for a single user 8 00:00:18,690 --> 00:00:20,730 and click a button that will send an email 9 00:00:20,730 --> 00:00:23,640 or at least open an email client to send an email 10 00:00:23,640 --> 00:00:25,890 to that very particular user. 11 00:00:25,890 --> 00:00:27,870 So it seems to me the only real resource 12 00:00:27,870 --> 00:00:29,790 that we're gonna have in this application is going 13 00:00:29,790 --> 00:00:32,369 to be our list of users. 14 00:00:32,369 --> 00:00:34,080 Therefore, I think we'll end 15 00:00:34,080 --> 00:00:37,710 up building a user's reducer to produce our list 16 00:00:37,710 --> 00:00:39,600 of all the different users. 17 00:00:39,600 --> 00:00:42,510 We'll also make an action creator that's going to load 18 00:00:42,510 --> 00:00:44,430 up the data of all of our different users, 19 00:00:44,430 --> 00:00:46,200 but we'll get to that in just a minute. 20 00:00:46,200 --> 00:00:49,263 Let's first start with our users reducer. 21 00:00:50,130 --> 00:00:53,470 So in our reducer directory, I'm gonna create a new file 22 00:00:54,630 --> 00:00:56,493 and I'm just gonna call it users. 23 00:00:59,040 --> 00:01:01,590 At the very top, we're going to need to import a type, 24 00:01:01,590 --> 00:01:04,830 so let's also make our first action type. 25 00:01:04,830 --> 00:01:06,510 I'm going to make a new file inside 26 00:01:06,510 --> 00:01:10,653 of our actions directory called types.js. 27 00:01:12,510 --> 00:01:14,550 Let's assume that our action creator is going 28 00:01:14,550 --> 00:01:18,420 to return an action called FETCH USERS. 29 00:01:18,420 --> 00:01:23,420 So we will export const FETCH USERS. FETCH USERS. 30 00:01:26,430 --> 00:01:28,890 I'm gonna save this, close it, 31 00:01:28,890 --> 00:01:31,980 and then back in our reducer file, we will 32 00:01:31,980 --> 00:01:36,980 we will import our type FETCH USERS 33 00:01:36,990 --> 00:01:41,753 from actions types. Okay. 34 00:01:43,710 --> 00:01:45,750 Now, once we get this action come across 35 00:01:45,750 --> 00:01:48,060 with type FETCH USERS, we're just going to assume 36 00:01:48,060 --> 00:01:49,650 so you know, we're building this all from scratch. 37 00:01:49,650 --> 00:01:51,630 We're just gonna assume that when an action comes 38 00:01:51,630 --> 00:01:54,450 across with this FETCH USERS type 39 00:01:54,450 --> 00:01:57,060 that the action will contain a payload that consists 40 00:01:57,060 --> 00:01:59,430 of all the different users that we wanna show on the screen. 41 00:01:59,430 --> 00:02:02,760 So an array of objects, that's what we're going to assume 42 00:02:02,760 --> 00:02:05,160 that we're going to get served here. 43 00:02:05,160 --> 00:02:07,290 So let's write our reducer. 44 00:02:07,290 --> 00:02:09,513 We'll export default function. 45 00:02:10,470 --> 00:02:12,540 The first argument is our state. 46 00:02:12,540 --> 00:02:14,340 We're going to have a list of users, 47 00:02:14,340 --> 00:02:17,340 so we'll default the state to an empty array. 48 00:02:17,340 --> 00:02:19,323 Second argument is an action. 49 00:02:20,460 --> 00:02:24,510 We'll do our switch over the action type, and in the case 50 00:02:24,510 --> 00:02:29,510 that it is FETCH USERS we will return our existing list 51 00:02:31,470 --> 00:02:35,373 of users along with the new list of users. 52 00:02:37,440 --> 00:02:39,840 Remember the spread operator, you can really just think 53 00:02:39,840 --> 00:02:43,230 of this line right here as take the existing state 54 00:02:43,230 --> 00:02:46,440 and concatenate on the new list of users as well. 55 00:02:46,440 --> 00:02:50,160 That's how the spread operator is really doing for us here. 56 00:02:50,160 --> 00:02:50,993 So in the case 57 00:02:50,993 --> 00:02:53,760 that we get an action that does not correspond 58 00:02:53,760 --> 00:02:55,590 to the type FETCH USERS 59 00:02:55,590 --> 00:02:57,960 we do need to handle the default case. 60 00:02:57,960 --> 00:03:01,203 So at the bottom we will will by default, just return state. 61 00:03:02,430 --> 00:03:03,750 All right, I'm gonna save this file. 62 00:03:03,750 --> 00:03:07,350 And now we need to wire it up to our combined reducer call. 63 00:03:07,350 --> 00:03:09,480 So I'll flip over to index.js. 64 00:03:09,480 --> 00:03:11,080 Inside the reducer directory 65 00:03:12,030 --> 00:03:16,833 we will import our users reducer from users 66 00:03:20,310 --> 00:03:22,350 and then we will replace this existing kind 67 00:03:22,350 --> 00:03:27,350 of dummy reducer in here with users, users reducer. 68 00:03:28,980 --> 00:03:30,810 Okay, so there's our whole reducer. 69 00:03:30,810 --> 00:03:32,640 We're probably not gonna need to change it at all 70 00:03:32,640 --> 00:03:34,320 throughout this entire application, 71 00:03:34,320 --> 00:03:38,340 but we might go back in there and I don't know, maybe pick 72 00:03:38,340 --> 00:03:41,550 around a little bit and put some debug statements. 73 00:03:41,550 --> 00:03:43,650 We'll see when we get there. 74 00:03:43,650 --> 00:03:45,720 So all we did in this section was create our one 75 00:03:45,720 --> 00:03:50,720 reducer that accepts a single action type of FETCH USERS. 76 00:03:50,760 --> 00:03:51,630 And we're going to assume 77 00:03:51,630 --> 00:03:54,570 that FETCH USERS is an action that's going to be passed 78 00:03:54,570 --> 00:03:56,910 through that's gonna contain an array 79 00:03:56,910 --> 00:03:59,700 of different users on action.payload. 80 00:03:59,700 --> 00:04:00,870 So this is, we're already building 81 00:04:00,870 --> 00:04:02,730 up some like really critical assumptions here. 82 00:04:02,730 --> 00:04:06,090 So let's keep these in mind as we go forward. 83 00:04:06,090 --> 00:04:07,770 Let's get started in the next section, 84 00:04:07,770 --> 00:04:10,170 where we will make an action creator that's going 85 00:04:10,170 --> 00:04:12,900 to create this FETCH USERS action. 86 00:04:12,900 --> 00:04:13,850 I'll see you there.