1 00:00:00,910 --> 00:00:05,090 In the last video we spoke about exactly how we're going to load up our users into our application. 2 00:00:05,200 --> 00:00:06,720 So we're not going to take the easy way out. 3 00:00:06,730 --> 00:00:11,290 We're going to do things the more realistic albeit a little bit more challenging way. 4 00:00:11,290 --> 00:00:16,050 And like I said I can tell you right now we are going to run into one or two issues. 5 00:00:16,180 --> 00:00:20,770 So if at some point something looks a little bit off don't sweat it we're probably going to end up fixing 6 00:00:20,770 --> 00:00:21,540 it. 7 00:00:21,580 --> 00:00:21,900 All right. 8 00:00:21,910 --> 00:00:23,060 So here's the idea. 9 00:00:24,110 --> 00:00:27,800 We're going to create a new action creator called fetch user. 10 00:00:27,830 --> 00:00:32,750 Now remember our current action creator is called fetch posts and there's that s on the end which indicates 11 00:00:32,750 --> 00:00:36,050 we are fetching multiple posts from one action Creator. 12 00:00:36,050 --> 00:00:41,240 This new action creators called fetch user singular and so the idea here is that we're going to use 13 00:00:41,240 --> 00:00:45,810 the action creator to fetch one individual user at a time. 14 00:00:45,830 --> 00:00:49,550 Now the action crater itself it's going to make a request over to that API. 15 00:00:49,550 --> 00:00:55,340 It's going to get our chosen user like some user with some particular ID and then it will dispatch an 16 00:00:55,340 --> 00:01:00,950 action with the type of something like fecche user and will have our data on the pallet property. 17 00:01:00,950 --> 00:01:05,870 Remember we don't really want to use just the response that I typed on here it's actually response data 18 00:01:05,870 --> 00:01:07,430 that we care about. 19 00:01:07,550 --> 00:01:13,430 So then we're going to also create a user's reducer which is going to hold a list of all of the users 20 00:01:13,490 --> 00:01:15,300 we have into our application. 21 00:01:15,350 --> 00:01:18,020 So notice how the action creator is fetching one record. 22 00:01:18,120 --> 00:01:23,030 But we're going to essentially tabulate or collect all the different records that we get inside of that 23 00:01:23,040 --> 00:01:23,870 reducer. 24 00:01:24,210 --> 00:01:24,480 OK. 25 00:01:24,510 --> 00:01:25,330 Let's get to it. 26 00:01:25,550 --> 00:01:28,830 I'm going to flip back over to my code editor. 27 00:01:28,970 --> 00:01:34,010 We're going to first start off inside of our actions index indexed Yes file by putting together a new 28 00:01:34,010 --> 00:01:37,350 action creator to fetch just one user at a time. 29 00:01:37,790 --> 00:01:42,530 So the actual creator we're going to put together is going to initially look basically identical to 30 00:01:42,530 --> 00:01:43,950 the one that we have right here. 31 00:01:44,060 --> 00:01:51,410 So I'm going to say export Konst fetch user when we call this action creator we're going to pass in 32 00:01:51,480 --> 00:01:55,840 the idea of the user that we want to fetch as an argument. 33 00:01:55,860 --> 00:02:02,140 So this idea right here this is going to be the idea of the user that we want to fetch. 34 00:02:02,160 --> 00:02:06,620 So then we're going to use the same format where we have a function that returns a function. 35 00:02:06,660 --> 00:02:08,610 So I will say async dispatch 36 00:02:11,790 --> 00:02:14,510 and then we'll say Konst response is going to be a wait. 37 00:02:14,510 --> 00:02:16,840 Jason plays older. 38 00:02:16,870 --> 00:02:21,490 Don't get in now this time we are not going to make a request to the posts and point. 39 00:02:21,560 --> 00:02:27,180 Instead we want to make requests to the users and point but we want to fetch a user with this very particular 40 00:02:27,180 --> 00:02:27,750 ID. 41 00:02:27,900 --> 00:02:33,270 And remember as I showed you in the last video we can fetch one individual user at a time by putting 42 00:02:33,300 --> 00:02:37,110 a slash and then the idea of the user that we want to fetch. 43 00:02:37,110 --> 00:02:43,290 So over here we're not going to put just users of what we really want is users slash. 44 00:02:43,620 --> 00:02:49,790 Id like so we're going to rewrite that using yes 20:15 syntax with a template string instead. 45 00:02:49,920 --> 00:02:52,800 Just to kind of clean up a little bit. 46 00:02:52,890 --> 00:02:58,530 So I'm going to replace the single quotes with back ticks like so and I'll put my dollar sign curly 47 00:02:58,530 --> 00:03:02,430 braces ID inside there. 48 00:03:02,620 --> 00:03:08,860 All right so after we make that request and get back a response I'll then dispatch an action with type 49 00:03:09,730 --> 00:03:12,180 batch underscore user. 50 00:03:12,280 --> 00:03:14,180 And again remember it is singular. 51 00:03:14,210 --> 00:03:22,100 No æsir because we are fetching one user at a time and then on our Paillard property we will put response 52 00:03:22,160 --> 00:03:24,380 dot data. 53 00:03:24,390 --> 00:03:26,010 All right so that's pretty much it. 54 00:03:26,010 --> 00:03:31,410 Now one thing I want to point out here is that in fetch posts where we fetch a list of posts the response 55 00:03:31,410 --> 00:03:34,920 that we got was a array of records. 56 00:03:34,950 --> 00:03:35,800 So notice how. 57 00:03:35,850 --> 00:03:41,880 Here's the Post's end point we got back an array of objects but when we fetch one user at a time we 58 00:03:41,880 --> 00:03:46,910 don't get an array we get just an object that has details about that given user. 59 00:03:46,950 --> 00:03:50,640 So just something I want to point out because that's going to end up in are reduced to looking like 60 00:03:50,700 --> 00:03:52,110 ever so slightly different. 61 00:03:52,140 --> 00:03:54,140 Maybe we will see. 62 00:03:54,240 --> 00:03:54,460 OK. 63 00:03:54,480 --> 00:03:55,610 So this looks good. 64 00:03:55,650 --> 00:03:57,420 We've got our action creator put together. 65 00:03:57,430 --> 00:03:58,950 So let's take a quick pause right here. 66 00:03:58,980 --> 00:04:03,240 When we come back in the next section we're going to start putting together our user Hetter component 67 00:04:03,390 --> 00:04:07,140 and making sure that it can call Fettes user right here at the appropriate time. 68 00:04:07,140 --> 00:04:09,250 So a quick pause and I'll see you in just a minute.