1 00:00:00,920 --> 00:00:05,240 In the last section we started working on fenceposts and users and we've now got a better idea of how 2 00:00:05,240 --> 00:00:10,790 we can call an action creator from an action creator and still kind of wait for the code inside of the 3 00:00:11,180 --> 00:00:13,110 interaction creator to be completed. 4 00:00:13,370 --> 00:00:17,540 So now we're going to start to move on our next step is to make sure that once we have called fecche 5 00:00:17,540 --> 00:00:22,280 posts and waited for that action career to do its entire thing we then want to somehow get that list 6 00:00:22,280 --> 00:00:23,100 of posts. 7 00:00:23,240 --> 00:00:25,410 And there's a very easy way that we can do this. 8 00:00:25,430 --> 00:00:31,280 Remember the second argument that redux thunk calls our inner functions with for all these action creators. 9 00:00:31,280 --> 00:00:37,880 The second argument in addition to dispatch is the get States arguments that get state function is the 10 00:00:37,880 --> 00:00:39,770 function that exists on the redux store. 11 00:00:39,800 --> 00:00:43,140 That gives us access to all the data inside of redux. 12 00:00:43,160 --> 00:00:48,680 So what we're going to do here is get access to that second argument of get state. 13 00:00:48,760 --> 00:00:54,130 So now inside of this action creator after we wait for all these posts to be fetched and processed by 14 00:00:54,130 --> 00:01:00,400 the reducer we can then call get States and reference the posts property and that should have all of 15 00:01:00,400 --> 00:01:03,540 the posts that we just loaded up and caught inside of our reducer. 16 00:01:03,880 --> 00:01:05,220 Let's very quickly test that out. 17 00:01:05,230 --> 00:01:10,570 I'm going to take that gets gateposts and I will replace it inside this console log like so then I'm 18 00:01:10,570 --> 00:01:12,390 going to remove the first console log. 19 00:01:13,220 --> 00:01:15,450 All right so now everything works as expected. 20 00:01:15,470 --> 00:01:20,720 We should load up our application see a brief little pause as we are fetching or let's suppose and then 21 00:01:20,720 --> 00:01:24,000 we should see a log of all the posts we have fetched. 22 00:01:24,020 --> 00:01:29,210 All right so I get to save this and we'll flip back over and sure enough I see the big con. right here 23 00:01:29,390 --> 00:01:36,500 with all the folks that we have fetched and it's got all the typical ones inside there OK that looks 24 00:01:36,500 --> 00:01:36,880 good. 25 00:01:36,920 --> 00:01:42,920 So now the next thing we need to do is iterate through this list of posts find a unique user IDs and 26 00:01:42,920 --> 00:01:46,960 then fetch a user for each one. 27 00:01:46,990 --> 00:01:51,780 All right to do that we're going to make use of that load ash library that we imported at the top to 28 00:01:51,780 --> 00:01:57,770 do that memoization step load ash is going to make working with this list of posts and pulling out the 29 00:01:57,770 --> 00:02:01,350 user IDs and finding just the unique ones pretty easy and straightforward. 30 00:02:01,350 --> 00:02:03,290 So let me show you how we're going to do that. 31 00:02:03,290 --> 00:02:05,670 First off we're going to call get state. 32 00:02:05,810 --> 00:02:07,960 We're going to reference the post property search number. 33 00:02:07,960 --> 00:02:09,620 That is an array. 34 00:02:09,620 --> 00:02:15,380 We're then going to use load ashes version of the map function to remember map is a function on all 35 00:02:15,380 --> 00:02:20,990 javascript raise load ash has its own version of map that has a couple of nice little features inside 36 00:02:21,050 --> 00:02:21,860 of it. 37 00:02:21,880 --> 00:02:27,050 So I didn't say underscore map and I'll pass in those posts as the first argument. 38 00:02:27,050 --> 00:02:32,780 Now we want to pull off just the user id property from all those posts and find just the unique user 39 00:02:32,780 --> 00:02:33,870 IDs. 40 00:02:34,010 --> 00:02:40,070 So to get just the user ID out of each one of these I'm going to put a second argument inside of here 41 00:02:40,700 --> 00:02:44,770 a string of user id like so. 42 00:02:45,140 --> 00:02:49,820 So again that's going to go through all of our different posts and pull off just that user id property. 43 00:02:49,910 --> 00:02:56,120 So we'll then have as a result of this entire expression an array of all of the different user IDs it's 44 00:02:56,120 --> 00:03:01,280 going to be 100 long because we have 100 posts so we now need to go through it and find just that unique 45 00:03:01,370 --> 00:03:05,520 user IDs to do so we can also use load ASH for that. 46 00:03:05,580 --> 00:03:09,010 Yet like I said hello ash is very useful you can use it for a lot of things. 47 00:03:09,040 --> 00:03:18,090 So to find just the unique user IDs I'll call underscore dot you and IQ likes so short for unique so 48 00:03:18,090 --> 00:03:24,500 unique is going to return an array with just the unique user IDs so will assign that to a variable right 49 00:03:24,500 --> 00:03:26,120 here called user IDs. 50 00:03:26,220 --> 00:03:30,240 And just to make sure that we're going down the right path here I'll cancel that out and we'll run this 51 00:03:30,240 --> 00:03:31,770 really quickly inside of our browser. 52 00:03:32,650 --> 00:03:35,650 All right so I'll flip back over and I'll see my counsel right here. 53 00:03:35,650 --> 00:03:38,030 I have one two three four five six seven eight nine ten. 54 00:03:38,080 --> 00:03:40,610 And again I've got that extra little idea inside there. 55 00:03:40,680 --> 00:03:42,880 You are probably not going to see that whatsoever. 56 00:03:42,880 --> 00:03:46,850 This is like a temporary little issue with the some placeholder API. 57 00:03:46,870 --> 00:03:50,840 More importantly I see the correct list of ideas inside of here. 58 00:03:50,880 --> 00:03:56,950 It's now the last thing we do is iterate over that list of IDs and for every ID we need to call our 59 00:03:56,950 --> 00:04:02,480 fecche user action creator in the same way that we called our action creator appear. 60 00:04:02,590 --> 00:04:12,060 So I will say user IDs for each and then for each ID we are going to call fetch user We're going to 61 00:04:12,060 --> 00:04:20,960 pass in that I.D. and then we're going to dispatch the results of it like so. 62 00:04:20,980 --> 00:04:21,310 All right. 63 00:04:21,340 --> 00:04:25,140 This time around we do not have to put the away keyword inside of here. 64 00:04:25,150 --> 00:04:29,170 The reason that we don't have to put a weight in front of dispatch this time around is that you and 65 00:04:29,170 --> 00:04:35,210 I do not care at all about waiting for each user to be fetch inside a fetch Posten users. 66 00:04:35,290 --> 00:04:36,430 It doesn't matter to us. 67 00:04:36,550 --> 00:04:41,050 We just wanted to wait and make sure that we loaded up the list of posts and then once we got the posts 68 00:04:41,350 --> 00:04:45,720 all we wanted to do was initiate it request to go and fetch the individual users. 69 00:04:45,910 --> 00:04:50,470 But we don't have any other logic inside of here that we need to run after we fetch those users. 70 00:04:50,470 --> 00:04:54,730 So we don't have to put any other awake humored in a wait for each user to fetch. 71 00:04:54,790 --> 00:04:56,420 Not a requirement this time around. 72 00:04:56,740 --> 00:05:00,930 If we had some other resource we wanted to fetch inside of here then we could use the Awake keyword 73 00:05:00,970 --> 00:05:08,600 up there and then down here like get access to our list of users with get state DOT users and then like 74 00:05:08,620 --> 00:05:11,440 print those out or do whatever you want to do with them. 75 00:05:11,440 --> 00:05:16,210 Now one thing I do want to mention very quickly is that the syncopate syntax does not work with a for 76 00:05:16,240 --> 00:05:17,310 each statement. 77 00:05:17,320 --> 00:05:22,540 So if you did want to kind of a wait for each user to be fetched we'd have to adjust this code a little 78 00:05:22,540 --> 00:05:24,710 bit just so you know how to do that. 79 00:05:24,710 --> 00:05:27,520 I just I'm sorry I feel compelled to tell you how to do that. 80 00:05:27,670 --> 00:05:33,520 I think at the top of my head I'm pretty sure we could do something like user IDs dot map or every ID 81 00:05:33,520 --> 00:05:41,870 we could dispatch fetch user with the ID can return an array of promises. 82 00:05:41,880 --> 00:05:43,450 Yes I think so. 83 00:05:43,590 --> 00:05:47,250 I think we could combine that all together promised. 84 00:05:47,280 --> 00:05:54,850 All like so and then like probably chain on like a van or put on an a wait. 85 00:05:54,870 --> 00:05:55,940 Were getting really off topic here. 86 00:05:55,940 --> 00:05:59,160 I just wanted you to have a quick example of how you might do that on our side off top of my head but 87 00:05:59,400 --> 00:06:02,190 thats the path that youd want to go towards again anyways. 88 00:06:02,310 --> 00:06:03,780 This should work out just fine right here. 89 00:06:03,840 --> 00:06:06,420 So we're not going to loop over all the different user IDs. 90 00:06:06,510 --> 00:06:11,100 We will call the appropriate action creator when we call that thing will then dispatch it. 91 00:06:11,130 --> 00:06:15,450 That should make sure that our inner function inside the section create right here gets called by redux 92 00:06:15,450 --> 00:06:20,530 think its going to make sure that we fetch that user ID and then dispatch the appropriate action. 93 00:06:20,550 --> 00:06:24,960 And most importantly we're only doing that one time for each unique user ID. 94 00:06:24,990 --> 00:06:27,540 So without further ado let's save this right here. 95 00:06:27,570 --> 00:06:30,730 We'll flip back over and we'll test it out really quickly. 96 00:06:30,750 --> 00:06:35,280 I'm going to flip back over and I still see that I get all my users on here. 97 00:06:35,410 --> 00:06:39,970 If you look at your network request you will notice that we're still making all those duplicate requests. 98 00:06:39,970 --> 00:06:40,900 That's totally fine. 99 00:06:40,900 --> 00:06:45,790 The reason that you're seeing all these duplications is because our user header component is still attempting 100 00:06:45,790 --> 00:06:49,550 to fetch its own data whenever it gets rendered on the screen. 101 00:06:49,600 --> 00:06:53,470 So to make sure that we don't get all these duplicate requests now because we have a single action creator 102 00:06:53,470 --> 00:06:57,840 that fetches all of our data for us we would open up the user hetter action creator. 103 00:06:58,090 --> 00:07:00,030 So here we are right here user hetter. 104 00:07:00,070 --> 00:07:02,650 It attempts to fetch its own data. 105 00:07:02,650 --> 00:07:05,240 So we don't want the user header to fetch its own data anymore. 106 00:07:05,470 --> 00:07:10,000 So we can move that component did mount next. 107 00:07:10,010 --> 00:07:13,220 We don't really need the fetch user action Creator in here at all. 108 00:07:13,220 --> 00:07:18,430 So I would remove that action creator up you're at the top and then we could remove the action creator 109 00:07:18,430 --> 00:07:21,170 list from the connect function down here as well. 110 00:07:21,300 --> 00:07:22,870 Like so. 111 00:07:22,930 --> 00:07:24,280 All right so now we can flip back over. 112 00:07:24,340 --> 00:07:29,440 I still see my list of users loaded up but if I look at my request log I've only made the very bare 113 00:07:29,500 --> 00:07:36,300 minimum number of requests we fetched users ID one all the way through 10 and that's it. 114 00:07:36,320 --> 00:07:40,150 So like I said two possible ways of solving this over fetching issue. 115 00:07:40,180 --> 00:07:45,020 Now when we look at this newly created action creator right here the logic inside of it is pretty darned 116 00:07:45,020 --> 00:07:45,650 compact. 117 00:07:45,650 --> 00:07:50,510 And I think that even though this load ash syntax might be a little bit off I think that eventually 118 00:07:50,510 --> 00:07:54,050 you would be able to look at this thing and understand what was going on pretty easily. 119 00:07:54,050 --> 00:07:58,970 In addition we still have fecche posts as an action creator and fetch user so we can still fetch a list 120 00:07:58,970 --> 00:08:03,470 of posts somewhere else inside of our application if we want it to and we can still fetch an individual 121 00:08:03,470 --> 00:08:05,640 user somewhere else if we wanted to as well. 122 00:08:06,990 --> 00:08:11,340 Finally I think that this approach is a little bit more clear than the memoires approach because like 123 00:08:11,340 --> 00:08:16,320 we said before you would really have to stare at this code for a little bit to understand what was really 124 00:08:16,320 --> 00:08:17,980 going on with it. 125 00:08:18,030 --> 00:08:19,160 All right. 126 00:08:19,160 --> 00:08:19,560 All right. 127 00:08:19,560 --> 00:08:20,520 So a quick pause right here. 128 00:08:20,550 --> 00:08:25,660 When we come back the next section we're going to do just one tiny little refactor to fetch Posten users. 129 00:08:25,680 --> 00:08:26,690 It is totally optional. 130 00:08:26,700 --> 00:08:28,320 You don't have to do it if you want to. 131 00:08:28,380 --> 00:08:33,120 I just want to show you an alternate way of making these couple little calls with load Aktion side of 132 00:08:33,120 --> 00:08:33,430 your. 133 00:08:33,540 --> 00:08:35,580 So quick break and I'll see you in just a minute.