1 00:00:00,540 --> 00:00:02,610 Instructor: We've got our users reducer put together, 2 00:00:02,610 --> 00:00:05,520 and we're making a very clear assumption here 3 00:00:05,520 --> 00:00:08,430 that the action that's gonna deliver us our users 4 00:00:08,430 --> 00:00:11,250 is going to have the type FETCH_USERS. 5 00:00:11,250 --> 00:00:14,220 So let's flip back over to our action creators file 6 00:00:14,220 --> 00:00:15,510 and make an action creator 7 00:00:15,510 --> 00:00:16,860 that's going to return an action 8 00:00:16,860 --> 00:00:20,100 that's gonna kind of match up with this API here. 9 00:00:20,100 --> 00:00:23,670 So I'm gonna go into actions, index.js. 10 00:00:23,670 --> 00:00:27,180 At the top, we'll first import our action type 11 00:00:27,180 --> 00:00:32,180 which will be FETCH_USERS from ./types. 12 00:00:34,050 --> 00:00:35,910 And then we'll immediately make our action creator. 13 00:00:35,910 --> 00:00:38,640 Now, remember, the purpose of this action creator 14 00:00:38,640 --> 00:00:43,470 is just to return a kind of default or static list of users. 15 00:00:43,470 --> 00:00:44,430 So as the payload, 16 00:00:44,430 --> 00:00:46,860 we're going to hard code the list of users. 17 00:00:46,860 --> 00:00:48,780 Again, the entire point of this application 18 00:00:48,780 --> 00:00:51,870 is we want to kind of put this user list together. 19 00:00:51,870 --> 00:00:53,340 We're gonna have a bunch of static data, 20 00:00:53,340 --> 00:00:54,420 and then we're gonna come back 21 00:00:54,420 --> 00:00:56,493 and do the middleware at the end. 22 00:00:57,450 --> 00:00:58,710 So let's create our function. 23 00:00:58,710 --> 00:01:03,710 We'll export function fetchUsers, 24 00:01:03,930 --> 00:01:06,180 and it's just gonna return an action 25 00:01:06,180 --> 00:01:09,300 with type FETCH_USERS. 26 00:01:09,300 --> 00:01:11,520 And payload, this is where we're gonna put 27 00:01:11,520 --> 00:01:13,950 our static list of users. 28 00:01:13,950 --> 00:01:15,480 So we're gonna have it be an array, 29 00:01:15,480 --> 00:01:18,210 because that's kind of the the data contract we set up 30 00:01:18,210 --> 00:01:19,230 inside the reducer. 31 00:01:19,230 --> 00:01:21,360 We're assuming that it's gonna be an array. 32 00:01:21,360 --> 00:01:22,320 And we're gonna assume 33 00:01:22,320 --> 00:01:25,140 that it's an array of objects in particular. 34 00:01:25,140 --> 00:01:29,130 And each object is going to represent one particular user. 35 00:01:29,130 --> 00:01:32,100 For right now, we'll just say that each user has a name. 36 00:01:32,100 --> 00:01:34,740 So here's user number one. 37 00:01:34,740 --> 00:01:36,903 They've got a name of Jane. 38 00:01:39,810 --> 00:01:42,390 We've got another user with the name of, 39 00:01:42,390 --> 00:01:44,793 how about Alex? 40 00:01:46,500 --> 00:01:49,203 And a name of Jim. 41 00:01:50,520 --> 00:01:52,470 Cool, nice and straightforward. 42 00:01:52,470 --> 00:01:54,930 So we've got our static list of data at this point, 43 00:01:54,930 --> 00:01:56,760 and it's the only thing that's getting created, 44 00:01:56,760 --> 00:01:59,850 or, excuse me, returned from our action creator. 45 00:01:59,850 --> 00:02:01,740 So this kind of takes care of the redux side of things 46 00:02:01,740 --> 00:02:03,270 for right now, 47 00:02:03,270 --> 00:02:05,880 which means we should now flip over to our components 48 00:02:05,880 --> 00:02:08,520 and put together our user list 49 00:02:08,520 --> 00:02:10,410 or our component that's gonna show our list 50 00:02:10,410 --> 00:02:12,480 of all the different users in the app. 51 00:02:12,480 --> 00:02:14,703 Let's tackle that inside the next section.