1 00:00:00,840 --> 00:00:05,590 In the last video we were able to call our fecche user action creator from our compound did mount inside 2 00:00:05,590 --> 00:00:07,680 the user Hetter class. 3 00:00:07,720 --> 00:00:12,280 Now in this video we're going to start to make sure that we wire up a reducer to catch that action that 4 00:00:12,280 --> 00:00:14,740 is now being dispatched from our actual creator. 5 00:00:14,740 --> 00:00:19,900 And we're going to make sure that this new users reduce is going to maintain a array or a simple list 6 00:00:20,110 --> 00:00:23,110 of all the users that we have fetched inside of our application. 7 00:00:23,110 --> 00:00:28,960 Once we collect that data inside the reducer we can then make it available to our user Hetter component 8 00:00:29,470 --> 00:00:33,310 and then the user head or component can pick out that user that it cares about and shows some details 9 00:00:33,310 --> 00:00:34,510 about it on the screen. 10 00:00:34,510 --> 00:00:35,410 So let's get to it. 11 00:00:35,410 --> 00:00:40,870 We're going to first create a new reducer by creating a file inside the reducers directory. 12 00:00:40,870 --> 00:00:44,170 So I'm going to call this user's reducer. 13 00:00:44,380 --> 00:00:46,210 Yes. 14 00:00:46,250 --> 00:00:51,470 And then inside of your we'll put down some typical boilerplate for a producer they'll say export default 15 00:00:51,830 --> 00:00:53,490 a function. 16 00:00:53,570 --> 00:01:00,110 This is going to be called with arguments States and action because this producer is supposed to maintain 17 00:01:00,140 --> 00:01:02,340 an array or list of records. 18 00:01:02,360 --> 00:01:08,950 I'm going to make its default state value a empty array like so then inside of my producer to set up 19 00:01:08,980 --> 00:01:10,140 a switch statement. 20 00:01:13,280 --> 00:01:18,600 And we're going to set up one case here to watch for just the action type that this producer cares about. 21 00:01:18,830 --> 00:01:24,830 If we open up the actions index file or Simien actions index yes file again you'll recall that we only 22 00:01:24,830 --> 00:01:29,060 care about actions of type fetch user inside of that reducer. 23 00:01:29,090 --> 00:01:36,390 So back inside of this case statement I'll say case fetch underscore user like so now if we see a reducer 24 00:01:36,540 --> 00:01:40,920 or see me in action with that type right there we're going to make sure that we add the payload property 25 00:01:40,980 --> 00:01:45,590 on that action to our state array. 26 00:01:45,590 --> 00:01:50,250 Now we just spoke about how we can add elements to NRA member we looked at this diagram right here. 27 00:01:50,330 --> 00:01:53,340 So to add an element to an array we can create a new array. 28 00:01:53,390 --> 00:01:58,640 We can say dot dot dot state a comma and then the new record that we want to shove in there. 29 00:01:58,640 --> 00:02:06,530 So for a case for each user I will say return dot dot dot state an action payload that is the new record 30 00:02:06,530 --> 00:02:11,720 that I want to add in and we'll also set up our default case in which case we will simply return our 31 00:02:11,720 --> 00:02:14,430 state OK. 32 00:02:14,470 --> 00:02:15,530 That looks pretty good. 33 00:02:15,830 --> 00:02:20,060 So we'll now take the seducer and make sure that we wire it up to our combined reducers call in the 34 00:02:20,060 --> 00:02:22,590 reducers index such as file. 35 00:02:22,670 --> 00:02:31,410 So at the top I will import users reducer from users re douceur and then we'll make sure that we add 36 00:02:31,410 --> 00:02:34,210 this into the combined reducer call. 37 00:02:34,310 --> 00:02:41,570 So add in a new key of users and that will get our reducer of users Regis or. 38 00:02:41,750 --> 00:02:43,120 OK so not too bad. 39 00:02:43,420 --> 00:02:49,600 So now last thing we really have to do here is open up our user header J.S. file. 40 00:02:49,690 --> 00:02:55,960 So now inside if you're this component needs to get access to our redux level state remember any time 41 00:02:55,960 --> 00:02:59,590 we want to do that we will find the Mount St. to prop's function. 42 00:02:59,590 --> 00:03:04,990 So down underneath the components self I will define map state to prop's. 43 00:03:05,150 --> 00:03:07,280 This will be called with the state argument. 44 00:03:08,790 --> 00:03:14,160 And now we need to look at state DOT users and to find the very particular users that we care about 45 00:03:14,460 --> 00:03:15,270 to get started. 46 00:03:15,270 --> 00:03:21,450 Let's just return an object with the users property and will reference state DOT users. 47 00:03:21,450 --> 00:03:27,000 So now our component is going to have access to a prop called this Propst users that's going to be the 48 00:03:27,000 --> 00:03:29,380 array of all the users that we care about. 49 00:03:30,440 --> 00:03:35,060 All right so now inside the render method we're going to look through that array and find the user that 50 00:03:35,060 --> 00:03:36,580 we want to display. 51 00:03:36,620 --> 00:03:42,540 So to do so I'm going to say Konst user and then we're going to use this Propst users. 52 00:03:42,620 --> 00:03:49,700 That's the array of users dot find like so not just you know find is a built in method on Javascript 53 00:03:49,700 --> 00:03:53,030 arrays we can call it with a function. 54 00:03:53,030 --> 00:03:56,500 This function is going to be invoked with every element inside of that array. 55 00:03:56,510 --> 00:04:02,660 And so I will we will refer to that argument as simply user and then as soon as we return true from 56 00:04:02,660 --> 00:04:08,810 this inner function right here the entire find function is going to stop and return whatever element 57 00:04:08,840 --> 00:04:10,740 we had return true for now. 58 00:04:10,790 --> 00:04:14,480 When I actually say those words out head sounds a little bit confusing. 59 00:04:14,570 --> 00:04:16,800 So let me just give you a very quick example. 60 00:04:17,870 --> 00:04:19,640 I'll pull open my console again. 61 00:04:19,640 --> 00:04:24,730 We'll just do a real quick test here so I can say Konst colors and I'll do my array of colors again 62 00:04:25,210 --> 00:04:30,820 and I'll add in like say a blue and red like so I think I've got a typo there. 63 00:04:30,830 --> 00:04:31,730 Let me fix that. 64 00:04:33,580 --> 00:04:42,190 OK so now to get say blue out of there we can do colors find and then for each color I want to return 65 00:04:42,250 --> 00:04:46,340 the results of color being compared with the string blue. 66 00:04:46,370 --> 00:04:52,020 So now which ever first element inside of our array returns true for this comparison right here. 67 00:04:52,020 --> 00:04:55,410 We're going to return that color from the overall expression. 68 00:04:55,540 --> 00:04:58,880 And so we're going to do the same thing to find that user that we care about. 69 00:04:58,920 --> 00:05:10,580 So I'm going to say find for every user find a user with an ID equal to this Propst user ID and I'm 70 00:05:10,580 --> 00:05:12,350 going to try to put that on one line. 71 00:05:12,380 --> 00:05:16,250 Actually I'll just zoom out so you can see the entire line like so. 72 00:05:16,250 --> 00:05:18,990 So this will find just the user that we care about. 73 00:05:21,300 --> 00:05:26,670 Now keep in mind when the application first is rendered onto the screen we will not have a list of users 74 00:05:26,670 --> 00:05:27,000 here. 75 00:05:27,060 --> 00:05:31,880 We will have an empty array but the user that we care about is not going to actually be available. 76 00:05:31,920 --> 00:05:35,770 So right underneath this will say if there is no user found. 77 00:05:35,790 --> 00:05:41,060 So if we did not find some appropriate user then we will just return nothing for right now. 78 00:05:41,960 --> 00:05:43,350 So just don't return anything. 79 00:05:43,370 --> 00:05:45,620 I don't want this component to show any content on the screen. 80 00:05:45,620 --> 00:05:49,870 I don't even really think it's appropriate to put loading although we certainly could we can return 81 00:05:49,870 --> 00:05:50,110 it. 82 00:05:50,180 --> 00:05:52,700 That said loading. 83 00:05:52,850 --> 00:05:53,850 Like so. 84 00:05:53,850 --> 00:05:59,820 But also keep it simple and all return NULL to indicate that I don't want this component to show anything. 85 00:05:59,840 --> 00:06:05,020 Now if we did find a user We will instead put the user's name inside of here. 86 00:06:05,190 --> 00:06:15,090 So the user's name is accessible on the name property so say user name like so. 87 00:06:15,120 --> 00:06:15,590 All right. 88 00:06:15,600 --> 00:06:19,210 And then very quickly I want to throw in one or two quick class names here. 89 00:06:19,260 --> 00:06:26,690 So on that div I'll put in a class name of simply Hetter like so. 90 00:06:26,700 --> 00:06:30,400 All right so I think this should be just about good enough. 91 00:06:30,420 --> 00:06:36,180 So let's take a save on this file and we'll flip back or the browser and we'll test this out really 92 00:06:36,180 --> 00:06:37,140 quick. 93 00:06:37,140 --> 00:06:37,350 All right. 94 00:06:37,350 --> 00:06:41,440 Now I got a nasty error message here so it cannot read properly. 95 00:06:41,460 --> 00:06:44,010 Find of undefined. 96 00:06:44,110 --> 00:06:46,340 Let's make sure I got that in all places up. 97 00:06:46,360 --> 00:06:48,710 So looks like I probably have a little typo somewhere. 98 00:06:48,790 --> 00:06:50,480 Let's see I've got users. 99 00:06:50,540 --> 00:06:51,340 I'm not going to make you. 100 00:06:51,360 --> 00:06:52,180 Oh that's right. 101 00:06:52,180 --> 00:06:53,090 Little mistake right. 102 00:06:53,170 --> 00:06:57,700 We defined map state to prop so we did not pass it off as the first argument to connect second to make 103 00:06:57,700 --> 00:07:00,040 sure that I do so really quickly. 104 00:07:00,060 --> 00:07:02,620 There we go. 105 00:07:02,730 --> 00:07:05,840 And now if I flip back over and refresh. 106 00:07:05,990 --> 00:07:06,230 Right. 107 00:07:06,240 --> 00:07:07,070 That's better. 108 00:07:07,950 --> 00:07:10,050 Now it's still loading just give it a second here. 109 00:07:10,050 --> 00:07:11,400 There we go that's perfect. 110 00:07:11,520 --> 00:07:11,820 OK. 111 00:07:11,820 --> 00:07:16,020 So I can now see that on every blog post I've listed out the authors name. 112 00:07:16,020 --> 00:07:22,470 So I see Leon Graham for the first 10 and then I see the second name of Irvin Howell and then Clementine 113 00:07:22,480 --> 00:07:25,190 Bach and so on all the way down to the bottom. 114 00:07:25,230 --> 00:07:27,430 So it definitely looks like this has worked out pretty well. 115 00:07:27,840 --> 00:07:33,840 But there's one little issue you remember I mentioned there is one little issue now before I tell you 116 00:07:33,840 --> 00:07:34,860 what that issue is. 117 00:07:34,920 --> 00:07:38,560 There's a little refactor that I want to show you for the user Hetter component. 118 00:07:38,580 --> 00:07:39,930 So take a quick pause. 119 00:07:39,960 --> 00:07:45,660 We're going to do that quick refactor and then I'll show you the kind of a real big issue that our application 120 00:07:45,660 --> 00:07:46,660 currently has. 121 00:07:46,680 --> 00:07:48,600 So quick pause and I'll see you in just a minute.