1 00:00:00,900 --> 00:00:06,410 Unless section we put together our entire action creator to fetch a list of posts from our API. 2 00:00:06,420 --> 00:00:11,730 Now keep in mind that this one time we very likely don't have any post stored on the API. 3 00:00:11,880 --> 00:00:16,730 So if we made this request right now I would probably expect to see an empty array come back. 4 00:00:16,980 --> 00:00:21,220 So just keep that in mind for when we first go to test this thing out inside the browser. 5 00:00:21,570 --> 00:00:26,370 Once we start to add in the functionality to add a new post to our API well then things are going to 6 00:00:26,370 --> 00:00:29,130 be a little bit more lively inside of our application. 7 00:00:29,580 --> 00:00:31,560 So let's now continue on the redux side of things. 8 00:00:31,560 --> 00:00:37,920 By working on our reducer which is going to store or I should say produce the post piece of state. 9 00:00:38,070 --> 00:00:40,680 Now again I wanted to remind you one last time. 10 00:00:40,680 --> 00:00:48,930 Our goal here inside this reducers is to return a object that contains the ID of every post as the key 11 00:00:49,110 --> 00:00:53,070 and then the value will be the actual post itself. 12 00:00:53,070 --> 00:00:57,720 Now this is going to be a little bit awkward because as we spoke about just a little bit ago the API 13 00:00:57,720 --> 00:01:01,170 that we're working with returns a list of posts in an array. 14 00:01:01,170 --> 00:01:05,850 So we're clearly going to have to do a little bit of a transformation step in here but I assure you 15 00:01:05,850 --> 00:01:08,240 it's not going to be the worst thing in the world. 16 00:01:08,570 --> 00:01:08,820 OK. 17 00:01:08,850 --> 00:01:11,410 So let's get started on our inducer. 18 00:01:11,460 --> 00:01:16,500 I'm going to start off by opening up the index dot J.S. file inside of the reducers directory. 19 00:01:16,920 --> 00:01:22,050 So inside of here we've got a dummy piece of state I should say a dummy reducer right now so we can 20 00:01:22,050 --> 00:01:24,180 remove this whole line that's in here. 21 00:01:24,190 --> 00:01:26,630 Just take the entire thing out. 22 00:01:26,640 --> 00:01:30,400 Next we'll import the REDUCE-IT that we're about to create. 23 00:01:30,390 --> 00:01:33,660 So we haven't made it yet but we're just going to assume that we're going to have it all put together 24 00:01:33,660 --> 00:01:34,740 in just a second. 25 00:01:35,020 --> 00:01:47,090 So import posts reducer from reducer posts and then we'll assign that to the Post's piece of state inside 26 00:01:47,100 --> 00:01:51,580 of the combine reducers call. 27 00:01:51,600 --> 00:01:52,970 OK so it looks pretty good. 28 00:01:52,980 --> 00:01:57,660 Now we can create the redos or post file and start putting that thing together. 29 00:01:57,690 --> 00:02:04,430 So inside the reducers directory will make the reducer posts that js file 30 00:02:07,260 --> 00:02:12,690 will immediately start off by importing our type of fetch posts from the actions file. 31 00:02:12,810 --> 00:02:22,440 So let's import fetch posts from up one directory into actions and then we don't really need to specify 32 00:02:22,440 --> 00:02:27,610 any file in there because we're importing from the index on G-S file. 33 00:02:27,770 --> 00:02:33,980 Next we'll put together some boilerplate inside of our reducer itself and export it immediately. 34 00:02:34,190 --> 00:02:42,520 So will say export default function this function is going to receive the previous state an action and 35 00:02:42,510 --> 00:02:45,750 then we have to essentially do something with it inside of here. 36 00:02:45,970 --> 00:02:53,520 So put in our switch statement to switch over the action type will immediately catch the default case 37 00:02:54,150 --> 00:03:01,770 in which case will return the state object will also add in our case for handling the incoming list 38 00:03:01,860 --> 00:03:03,930 of posts as well. 39 00:03:03,930 --> 00:03:07,260 And then the last thing I want to take care of before we talk about what we're going to do inside this 40 00:03:07,260 --> 00:03:13,080 case is I want to think about our initial state object or what we're going to default our state object 41 00:03:13,080 --> 00:03:15,990 to the very first time this thing runs. 42 00:03:16,040 --> 00:03:19,960 And so we're saying that we're going to store our list of posts inside of an object. 43 00:03:20,040 --> 00:03:26,700 So I'm going to say OK we will default our state to be an object no problem. 44 00:03:27,720 --> 00:03:28,420 OK. 45 00:03:28,710 --> 00:03:37,390 So at this point in time if we were to cancel log action dot response or some action not payload data. 46 00:03:37,710 --> 00:03:45,090 I would expect this to be an array of posts so light post one post too but we need to somehow coerce 47 00:03:45,090 --> 00:03:53,940 this thing or transform it into an object where the ID is the post ID and then the value is the actual 48 00:03:53,940 --> 00:03:55,500 post itself. 49 00:03:55,500 --> 00:04:00,180 So you might be thinking that will use like a for loop here or do some fancy transformation or something 50 00:04:00,180 --> 00:04:00,970 like that. 51 00:04:01,200 --> 00:04:06,990 Well in practice were actually just going to use the load ash module instead load ash library load library 52 00:04:06,990 --> 00:04:13,250 has a method on it that assumes that you want to do basically exactly this operation right here. 53 00:04:13,540 --> 00:04:20,550 Essentially take a array of records take one property out of each record and create an object out of 54 00:04:20,550 --> 00:04:21,590 that. 55 00:04:21,600 --> 00:04:26,370 So to give you a really good idea of how this load function is going to work and how it's going to just 56 00:04:26,430 --> 00:04:30,870 exactly solve this problem for us I want to test out the code for it. 57 00:04:30,870 --> 00:04:35,460 First it was kind of demo it inside the browser just to make sure thats really clear exactly what its 58 00:04:35,460 --> 00:04:36,620 doing. 59 00:04:37,350 --> 00:04:41,910 So going to flip on over to the browser and we're going to make use of a little tool that's going to 60 00:04:42,360 --> 00:04:45,290 help us understand exactly what's happening with this code. 61 00:04:45,330 --> 00:04:52,710 So let's open up a new tab and we're going to manually navigate to my name to Steven Grider dot get 62 00:04:52,710 --> 00:05:01,710 hub dot IO slash J us playgrounds and do make sure that you get capital J S P playgrounds in there. 63 00:05:01,870 --> 00:05:07,020 Also do make sure that you're going to get hub IO and then I really have to say it as well do double 64 00:05:07,020 --> 00:05:08,200 check the spelling on my name. 65 00:05:08,200 --> 00:05:13,950 It's very easy I found for people to misspell my name for whatever reason. 66 00:05:14,920 --> 00:05:15,320 OK. 67 00:05:15,330 --> 00:05:20,100 So once we come here we're going to get a little interface that's going to allow us to kind of do some 68 00:05:20,220 --> 00:05:22,510 quick prototyping of code. 69 00:05:23,190 --> 00:05:28,530 So essentially what it does is you can enter in some code on the left hand side over here and it will 70 00:05:28,560 --> 00:05:31,390 immediately print the results on the right hand side. 71 00:05:31,500 --> 00:05:32,900 And so it's kind of like a REPL. 72 00:05:32,910 --> 00:05:38,740 But the benefit to this thing right here is that it prints out every single line of code that you add. 73 00:05:39,030 --> 00:05:44,990 So for example if we say number equals five. 74 00:05:45,360 --> 00:05:45,800 Sorry. 75 00:05:45,840 --> 00:05:49,720 Let's let's just stick with the S-5 right now will say var number equals five. 76 00:05:49,800 --> 00:05:52,720 And we ask what number is zero it prints out 5. 77 00:05:52,860 --> 00:05:55,320 But if we then put out number plus one. 78 00:05:55,380 --> 00:05:58,620 Well the first log right here is for this line. 79 00:05:58,650 --> 00:06:02,480 And then the second log right here is for the second line right here. 80 00:06:02,610 --> 00:06:10,280 And so we can also say your number is number like so. 81 00:06:10,550 --> 00:06:14,700 And then I could go back and say change this number and everything automatically updates. 82 00:06:14,700 --> 00:06:19,260 So essentially it's just kind of like a fancy REPL that we can use to explore some different snippets 83 00:06:19,260 --> 00:06:20,320 of code. 84 00:06:20,370 --> 00:06:20,600 OK. 85 00:06:20,610 --> 00:06:26,250 So anyways back on track what we're attempting to do here is take that array of PPOs and massage it 86 00:06:26,310 --> 00:06:28,470 into an object. 87 00:06:28,470 --> 00:06:34,130 So I'm going to put down the list of posts as I expected to come in from the API. 88 00:06:34,240 --> 00:06:40,250 So every post has an ID and let's say that every post just has a title. 89 00:06:40,800 --> 00:06:46,300 So we'll say that first post has an idea for a title high. 90 00:06:46,390 --> 00:06:53,950 Second one has a idea of 25 and a title of by and let's just do one more on here for completion sake 91 00:06:53,950 --> 00:06:57,890 and we'll give this one thirty six. 92 00:06:58,000 --> 00:06:58,790 How's it going. 93 00:07:00,530 --> 00:07:04,410 OK so now if I look at my list of posts there it is right there. 94 00:07:04,580 --> 00:07:06,780 I've got an array. 95 00:07:07,340 --> 00:07:13,920 And inside that array is post number one post number two and post number three. 96 00:07:13,940 --> 00:07:20,280 So again the job or the goal that we have here is to turn this array of objects into an object itself. 97 00:07:20,330 --> 00:07:24,980 So a very simple very straightforward thing that we're going to use from loadout right here. 98 00:07:25,070 --> 00:07:32,510 We're going to say underscore which is the loadout library dot map keys so map keys right here is the 99 00:07:32,510 --> 00:07:37,950 little piece of magic that's going to make our life very straightforward very easy to make sure that 100 00:07:37,970 --> 00:07:41,500 you have a capital K in there for keys. 101 00:07:41,660 --> 00:07:47,250 So the way that map keys works is we provided a first argument of an array. 102 00:07:47,270 --> 00:07:50,350 So there's my list of posts right there. 103 00:07:50,420 --> 00:07:58,040 Then the second argument is going to be the property that we want to pull off of each object in here 104 00:07:58,400 --> 00:08:01,600 to use as the key on the resulting object. 105 00:08:01,610 --> 00:08:04,250 So if those words don't make sense no problem. 106 00:08:04,250 --> 00:08:09,950 Essentially we know that we want to use the ID as the key for every object inside of here. 107 00:08:10,010 --> 00:08:12,700 So we're going to pass in a string of ID. 108 00:08:13,260 --> 00:08:18,350 I'm going to delete the intermediate console log right here post because it's just kind of confusing. 109 00:08:18,350 --> 00:08:20,490 So you can see what map keys produces. 110 00:08:20,540 --> 00:08:29,690 It made an object where the key is the idea of the post and then the object itself is the whole entire 111 00:08:29,690 --> 00:08:30,230 post. 112 00:08:30,260 --> 00:08:32,580 Still with the idea inside of it. 113 00:08:32,660 --> 00:08:40,670 So we've got a key for that post points at the post with the idea for We've got a key of 25 points that 114 00:08:40,670 --> 00:08:46,990 the post of 25 and a key of 36 which points at the post with ID 36. 115 00:08:47,000 --> 00:08:53,000 So now to go full circle I will say that you know maybe this is our state object right here to go full 116 00:08:53,000 --> 00:08:59,150 circle if I want to very quickly and very easily look up a particular post as we're going to very shortly 117 00:08:59,150 --> 00:09:00,100 want to do. 118 00:09:00,290 --> 00:09:08,760 I could look at say States at 4 and there is my post with ID 4. 119 00:09:08,850 --> 00:09:14,250 And so I didn't have to write a fancy for loop I didn't have to use the array find helper anything like 120 00:09:14,250 --> 00:09:16,580 that to find some particular record in here. 121 00:09:16,620 --> 00:09:20,410 I just have to do a very simple Id look up. 122 00:09:21,090 --> 00:09:21,480 OK. 123 00:09:21,510 --> 00:09:26,260 So that's essentially what we're going to use for managing our states inside of this reducer. 124 00:09:26,370 --> 00:09:31,470 And really just all comes down to that map keys function that's a little piece of magic that makes our 125 00:09:31,470 --> 00:09:34,740 life very easy and very straightforward. 126 00:09:34,740 --> 00:09:41,730 So let's flip back toward douceur and add that code in back over here and do a little bit of cleanup 127 00:09:41,760 --> 00:09:44,970 on the code that we had inside that key statement. 128 00:09:44,970 --> 00:09:47,490 I'm going to make sure I import load ASH at the top. 129 00:09:47,630 --> 00:09:51,670 So import underscore from load ASH. 130 00:09:51,690 --> 00:09:56,080 I'm going to make sure I've already got load installed as an end module. 131 00:09:56,400 --> 00:09:58,900 Yup we've already got it so we're good to go. 132 00:09:59,400 --> 00:10:11,620 So all we got to do in here is we're going to say return map keys take action payload data and I want 133 00:10:11,620 --> 00:10:15,470 to pull off the id property of every incoming post. 134 00:10:16,060 --> 00:10:16,450 OK. 135 00:10:16,480 --> 00:10:17,440 So that's pretty much it. 136 00:10:17,440 --> 00:10:20,210 To fetch our initial list of posts. 137 00:10:20,380 --> 00:10:21,910 So this is looking pretty good so far. 138 00:10:21,970 --> 00:10:26,310 Let's continue with some more implementation on the redux side of things. 139 00:10:26,350 --> 00:10:27,460 Inside the next section.