1 00:00:01,190 --> 00:00:06,450 Let's spend some time to talk about how we store our data in all of our different reducers with redux 2 00:00:06,540 --> 00:00:06,740 . 3 00:00:06,860 --> 00:00:12,700 I'm talking specifically about what data structure we use inside of our reducers a really common pattern 4 00:00:12,700 --> 00:00:13,880 is to use an array. 5 00:00:13,920 --> 00:00:19,590 So I might have reducer and let's say that it's managing it list of different posts and a post will 6 00:00:19,590 --> 00:00:25,320 just be let's say something like an object has an ID and has a title and a body as well. 7 00:00:25,320 --> 00:00:29,490 But the really important part that I want to point out here is that it specifically has an ID. 8 00:00:29,940 --> 00:00:36,360 So a very common pattern is to say that my reducer for working with all my different posts will return 9 00:00:36,450 --> 00:00:43,450 an array of posts what are the implications of using an array to manage all of my data and redux. 10 00:00:43,470 --> 00:00:45,910 Well let's look at a couple of different options and here. 11 00:00:45,930 --> 00:00:48,600 Kind of different cases of actions. 12 00:00:48,870 --> 00:00:55,560 I've got my fetch post for dealing with fetching a singular post I've got fetch posts plural for dealing 13 00:00:55,560 --> 00:01:01,120 with multiple posts and I've also got update and deleting a post as well. 14 00:01:01,500 --> 00:01:06,750 So I'm going to make the case in this video that using an array for storing your data and redos sir 15 00:01:06,750 --> 00:01:12,040 is not a good approach and instead we might want to instead use an object. 16 00:01:12,150 --> 00:01:14,780 So let's look at a couple of slides to illustrate this point. 17 00:01:14,800 --> 00:01:20,210 So one thing I want to keep in mind again is that each post model that we have contains an ID. 18 00:01:20,250 --> 00:01:22,100 So in this case like an idea of 23. 19 00:01:22,110 --> 00:01:26,040 But it's really just a unique integer of some type. 20 00:01:26,130 --> 00:01:30,630 So this is what our reducer might be pumping out if we are using an array to store all of our different 21 00:01:30,630 --> 00:01:31,240 posts. 22 00:01:31,260 --> 00:01:36,620 So when we have array based storage we get a piece of state that looks something like a key of posts 23 00:01:36,870 --> 00:01:43,800 and that is pointing at an array of posed objects Nietzsche's are individual objects with an idea a 24 00:01:43,800 --> 00:01:46,300 title and a body. 25 00:01:46,320 --> 00:01:52,110 So again I want to make the case in this video that instead of using an array to store all of our list 26 00:01:52,110 --> 00:01:54,850 of posts I want to use an object instead. 27 00:01:54,850 --> 00:01:58,680 So I'm going to refer to this as object based storage. 28 00:01:58,680 --> 00:02:01,080 So in this case here's my state object. 29 00:02:01,080 --> 00:02:07,740 I've got a key of posts again but instead of just an array of posts I have an object containing all 30 00:02:07,740 --> 00:02:09,400 of my different posts. 31 00:02:09,480 --> 00:02:16,290 The keys of this object are the IDs of each individual post so you can see right here I've got a key 32 00:02:16,290 --> 00:02:17,350 of 34. 33 00:02:17,490 --> 00:02:24,330 The value of which is the post with ID 34 and all way down at the bottom I've got a key of 184 in a 34 00:02:24,330 --> 00:02:26,300 post with ID of 184. 35 00:02:26,340 --> 00:02:32,670 So each of these kind of rectangles often side represents an actual post object with an ID a title and 36 00:02:32,670 --> 00:02:33,940 a body. 37 00:02:34,680 --> 00:02:37,180 So let's think about some of the common operations. 38 00:02:37,460 --> 00:02:38,790 And what's that what's the difference. 39 00:02:38,790 --> 00:02:40,130 Why might we do this at all. 40 00:02:40,280 --> 00:02:45,570 What are we gaining what are we losing out on well we're gaining and losing as we're making it a lot 41 00:02:45,570 --> 00:02:51,660 easier on ourselves to commit some very common operations that we might expect to have to do with an 42 00:02:51,660 --> 00:02:53,230 array or an object. 43 00:02:53,250 --> 00:02:57,060 So I'm talking specifically about updating our state object. 44 00:02:57,420 --> 00:03:00,830 Let's look at some of the different operations that we may have to do. 45 00:03:01,200 --> 00:03:08,160 So this right here is a demo or but what we might do for an array verse an object whenever we are trying 46 00:03:08,160 --> 00:03:10,410 to read a specific record. 47 00:03:10,410 --> 00:03:16,560 So let's say that I want to find a post with ID of 34 guys so let's say that a user navigates in our 48 00:03:16,560 --> 00:03:24,420 web application to a URL of something like my app dot com slash post slash 34 so they are intending 49 00:03:24,420 --> 00:03:29,670 to visit post with ID 30 for if we have an array based storage. 50 00:03:29,730 --> 00:03:36,390 I would take my the idea the post I'm trying to find and that would use the find helper on the array 51 00:03:36,570 --> 00:03:41,070 and look through each post until I find the post with the correct ID and then I would return it and 52 00:03:41,070 --> 00:03:41,870 say OK great. 53 00:03:41,880 --> 00:03:47,070 Here's the here's the post I'm trying to display to the user so this isn't bad logic on the left hand 54 00:03:47,070 --> 00:03:47,470 side. 55 00:03:47,470 --> 00:03:52,410 You we're using the Find helper fantastically here it's definitely good but I'm going to make the case 56 00:03:52,440 --> 00:03:57,360 that using an object instead is a dramatic simplification of logic. 57 00:03:57,540 --> 00:04:04,020 If we have object based storage and we want to find a post with a very particular ID instead of having 58 00:04:04,020 --> 00:04:10,110 to deal with all this fine stuff over here we can do say state posts and then use the bracket notation 59 00:04:10,160 --> 00:04:12,020 and pass to pass in post. 60 00:04:12,030 --> 00:04:19,080 I need to find both of these methods right here would return me the same exact post but the method on 61 00:04:19,080 --> 00:04:22,830 the right I would argue is significantly easier to implement. 62 00:04:22,860 --> 00:04:24,770 Test and understand. 63 00:04:25,230 --> 00:04:28,500 Let's look at a couple of other very common operations. 64 00:04:28,500 --> 00:04:29,990 So I'd say updating a record. 65 00:04:30,000 --> 00:04:33,090 This is where things really start to get a little bit hairy. 66 00:04:33,450 --> 00:04:39,060 So on the array side if I have some new post like you know I just fetched this one and I need to update 67 00:04:39,120 --> 00:04:40,420 an existing post. 68 00:04:40,650 --> 00:04:47,280 So we're imagining that my state DOT posts Ray already has posts Id of 34 in it before I can insert 69 00:04:47,280 --> 00:04:50,220 this new post or this updated version of the post. 70 00:04:50,220 --> 00:04:57,060 I have to go through all of my different posts and I've already got and filter out the post with ID 71 00:04:57,060 --> 00:04:58,040 34. 72 00:04:58,290 --> 00:05:06,050 And really what I intended to write here was something a little more like new state you state go that's 73 00:05:06,050 --> 00:05:07,680 all that better. 74 00:05:07,850 --> 00:05:13,550 So we'd have to walk through all the posts in the array dump the one with the ID 34 and then insert 75 00:05:13,580 --> 00:05:21,020 the new one that we defined up here at top on an object to over the same operation the same exact thing 76 00:05:21,020 --> 00:05:28,340 is dramatically simplified by using the spread operator inside of an object and key interpellation both 77 00:05:28,340 --> 00:05:36,320 of which are features of E6 I can create a new object which is these outside brackets or braces I say 78 00:05:36,320 --> 00:05:41,230 dot dot dot state which takes all of the existing posts out of my state. 79 00:05:41,540 --> 00:05:46,020 Then I create a new key value pair using key interpellation. 80 00:05:46,070 --> 00:05:50,170 So I say new post out ID which would resolve to 34. 81 00:05:50,480 --> 00:05:56,480 And then the value of that is the new post itself because I'm placing this key value pair to the right 82 00:05:56,480 --> 00:06:04,300 hand side of the dot dot dot state it will overwrite any existing records in the state object with key 83 00:06:04,300 --> 00:06:05,130 of 34. 84 00:06:05,150 --> 00:06:06,380 So that's the key here. 85 00:06:06,440 --> 00:06:11,810 Whenever I update a record if I use this syntax right here anything I put to the right will update any 86 00:06:11,810 --> 00:06:13,970 previous records with ID 34. 87 00:06:14,240 --> 00:06:19,850 So essentially we're kind of achieving the same effect here of deleting the existing post and inserting 88 00:06:19,850 --> 00:06:20,920 this new post. 89 00:06:20,990 --> 00:06:26,870 So that's kind of simulating an update but again I'm going to argue that the right hand side using an 90 00:06:26,870 --> 00:06:32,840 object is dramatically simplified logic compared to what we have on the left. 91 00:06:32,840 --> 00:06:34,110 So just one more here. 92 00:06:34,160 --> 00:06:35,200 Deleting a record. 93 00:06:35,210 --> 00:06:38,320 So this is another very simple one with an array. 94 00:06:38,330 --> 00:06:40,220 I've got posts I need to delete. 95 00:06:40,310 --> 00:06:43,270 Maybe it's I'm trying to delete the post ID 34. 96 00:06:43,490 --> 00:06:51,230 I will filter my post array and for whichever post you know whenever I find one that has a post of ID 97 00:06:51,230 --> 00:06:58,700 to delete which is 34 I'm going to dump it and the result is hey I got my array with out post of ID 98 00:06:58,700 --> 00:07:00,550 34. 99 00:07:00,590 --> 00:07:03,630 Now in the case over here I think I made a little bit of a mistake. 100 00:07:03,950 --> 00:07:09,230 We can use the loadout helper omit. 101 00:07:13,100 --> 00:07:18,530 And really I wanted to do something more like post I'd need to delete 102 00:07:23,660 --> 00:07:24,990 34. 103 00:07:25,070 --> 00:07:32,150 So by using the load ash helper omit what omit does is it takes an object which is state it finds a 104 00:07:32,150 --> 00:07:38,150 key of whatever the second argument is which is 34 and it just drops that key off the object so it just 105 00:07:38,150 --> 00:07:39,560 deletes the key entirely. 106 00:07:39,590 --> 00:07:41,120 That's what omit does. 107 00:07:41,480 --> 00:07:45,490 So again these are completely simple method or identical methods here. 108 00:07:45,590 --> 00:07:50,320 In practice and how they update the state object but on the right hand side. 109 00:07:50,330 --> 00:07:55,220 Again I'm going to argue that this is dramatically simplified logic compared to what we have on the 110 00:07:55,220 --> 00:07:56,360 left hand side. 111 00:07:56,780 --> 00:07:58,430 So let's see what this looks like in practice. 112 00:07:58,490 --> 00:08:03,860 Let's come back to our redo server here which is working with my array of posts and again this is all 113 00:08:03,860 --> 00:08:10,490 assuming that the piece of state is going to be an array so a list of posts and I want to refactor this 114 00:08:10,490 --> 00:08:15,010 from an array of posts to an object containing all my different posts. 115 00:08:15,590 --> 00:08:17,870 So up at the top I've got some initial state. 116 00:08:18,110 --> 00:08:24,800 Instead of using my array as my initial state and you say this reducer is now going to return an object 117 00:08:24,800 --> 00:08:26,900 containing all my different posts. 118 00:08:26,900 --> 00:08:31,970 So now inside of all these different methods are all these different cases I get to dramatically simplify 119 00:08:31,970 --> 00:08:32,980 the logic. 120 00:08:33,320 --> 00:08:37,780 Note that the comments that I have here like the action not payload equals equals equals. 121 00:08:37,850 --> 00:08:43,030 I just have the comment in here to be very clear about what the actual payload property is. 122 00:08:43,250 --> 00:08:47,800 So when I'm around fetching a singular post some underneath case fetch post. 123 00:08:47,810 --> 00:08:53,780 I'm saying that action not payload is a singular post but whenever I'm fetching posts plural so like 124 00:08:53,780 --> 00:08:59,990 multiple posts it might be an array of different posts action up here or in this case this array of 125 00:08:59,990 --> 00:09:00,880 posts. 126 00:09:01,130 --> 00:09:05,190 The array of posts in this case is something as controlled by my API. 127 00:09:05,220 --> 00:09:09,940 This might be something that I requested a list of post from and we can't really control how that data 128 00:09:09,940 --> 00:09:10,800 is coming in. 129 00:09:10,980 --> 00:09:14,720 So note that in the case that we're fetching multiple posts right here we will have to figure out a 130 00:09:14,720 --> 00:09:20,110 way to take these multiple posts and kind of turn it into the format that we're talking about here an 131 00:09:20,120 --> 00:09:25,700 object where the keys are the ID of each post and the value is the post itself. 132 00:09:25,700 --> 00:09:26,220 All right. 133 00:09:26,540 --> 00:09:28,110 So still a little every factor. 134 00:09:28,450 --> 00:09:30,720 I'm going to take out just the entire code block here. 135 00:09:30,760 --> 00:09:34,860 I really want to make the case that it's me dramatically simplified logic. 136 00:09:35,110 --> 00:09:44,780 I'm going to take my existing state or take action pay load ID which is the ID of the post and then 137 00:09:44,780 --> 00:09:47,540 I'll take action not payload which is the post itself. 138 00:09:47,540 --> 00:09:50,110 So again take all my posts. 139 00:09:50,360 --> 00:09:53,810 Create a new object stick all my existing posts into it. 140 00:09:53,840 --> 00:10:01,310 Create a new key value pair with the ID and the post itself and copy that over all the existing posts 141 00:10:01,320 --> 00:10:01,450 . 142 00:10:01,480 --> 00:10:07,310 So if I have already fetched a post with ID say 22 or something and I already have that in my state 143 00:10:07,310 --> 00:10:12,190 object the second half the statement right here will overwrite that existing post. 144 00:10:12,200 --> 00:10:15,200 So I do not have to worry about duplicates here anymore. 145 00:10:16,460 --> 00:10:22,010 Now in the fenceposts example again we've got an array of posts so I can't just I need to kind of coerce 146 00:10:22,010 --> 00:10:27,150 this data structure I need to take my array of posts and turn it into an object where the keys or the 147 00:10:27,140 --> 00:10:30,290 idea of the post and the values the post itself. 148 00:10:30,300 --> 00:10:34,930 So we don't have to write any fancy for loops or any logic like that to make this happen. 149 00:10:34,950 --> 00:10:44,360 Instead we can use low dash again specifically a method called map keys so map keys takes an array and 150 00:10:44,370 --> 00:10:45,730 a string. 151 00:10:46,000 --> 00:10:54,290 Here's what it does it looks for a property matching this string on each object in the array whatever 152 00:10:54,380 --> 00:10:54,570 . 153 00:10:54,600 --> 00:10:59,310 If that property if it exists it creates an object using that property. 154 00:10:59,550 --> 00:11:07,590 So in this case I've got an array of posts and I say look at each post and find the ID property whatever 155 00:11:07,590 --> 00:11:09,220 that Id property is. 156 00:11:09,240 --> 00:11:14,610 Make it the key on this new object and then set the value to be the post itself. 157 00:11:14,840 --> 00:11:16,280 OK so kind of confusing words here. 158 00:11:16,290 --> 00:11:17,960 Let's walk through in practice. 159 00:11:17,970 --> 00:11:22,980 Let's say that this first post over here the one although it's the left has an ID of three. 160 00:11:23,000 --> 00:11:31,460 So it specifically an ID property of three map keys is going to look at the id property. 161 00:11:31,620 --> 00:11:33,140 It's going to see the three. 162 00:11:33,240 --> 00:11:39,320 So it's going to create a key of three and then it's going to take the entire post object the entire 163 00:11:39,330 --> 00:11:42,480 post object that it was just working on and make it the value. 164 00:11:42,770 --> 00:11:49,910 So the purpose of map keys is simply to coerce our array of posts to the object matching the data structure 165 00:11:49,910 --> 00:11:50,840 that we want here. 166 00:11:51,020 --> 00:11:57,090 So that is absolutely indispensable for this entire kind of object based setup. 167 00:11:57,240 --> 00:12:02,390 So it looks like in practice the entire purpose of this union by call that I have right here with the 168 00:12:02,460 --> 00:12:07,970 existing array schema is to make sure that I overwrite any existing posts. 169 00:12:07,980 --> 00:12:13,880 So if I do a fetch post twice and I fetch the same list of posts I want to make sure that I'm not adding 170 00:12:13,880 --> 00:12:14,920 them all to my state. 171 00:12:14,940 --> 00:12:19,950 And so I don't have a duplicate list of all the posts but when we're using this object based storage 172 00:12:20,120 --> 00:12:24,480 the same exact operation gets dramatically simplified as well. 173 00:12:24,540 --> 00:12:29,090 So take all my existing posts and then I'll take dot dot dot. 174 00:12:29,100 --> 00:12:30,240 Map keys. 175 00:12:30,410 --> 00:12:34,850 Let's break this up to two lines just make a little more clear. 176 00:12:34,880 --> 00:12:36,300 Same new posts. 177 00:12:36,300 --> 00:12:44,110 We map keys action not payload and on each of those POWs find the ID property. 178 00:12:44,120 --> 00:12:48,170 Make it the key and the value will be the post itself. 179 00:12:48,410 --> 00:12:49,440 And so there we go. 180 00:12:49,470 --> 00:12:51,650 That's it dramatically simplify logic. 181 00:12:51,660 --> 00:12:58,200 And also Keith takes care of handling any duplicate fetch posts that I have inside of my state object 182 00:12:59,070 --> 00:13:00,550 now updating and post. 183 00:13:00,600 --> 00:13:06,880 This one is going to be identical to fetching a single post. 184 00:13:07,230 --> 00:13:16,530 Take all my existing posts take the ID of the post I'm updating and make the value. 185 00:13:16,560 --> 00:13:18,110 The post itself. 186 00:13:18,120 --> 00:13:20,350 So again we take all the posts. 187 00:13:20,460 --> 00:13:25,070 If there is a duplicate the second half the statement will overwrite the existing post in there. 188 00:13:25,200 --> 00:13:27,280 Thus it works as an update. 189 00:13:27,570 --> 00:13:37,740 And finally with the delete post I can return and I will omit and will just imagine here that action 190 00:13:37,740 --> 00:13:38,460 not payload. 191 00:13:38,460 --> 00:13:40,770 Is the idea of the post I want to delete. 192 00:13:40,980 --> 00:13:49,800 So maybe just to be clear I might leave myself a comment where hey the action not payload here here's 193 00:13:49,800 --> 00:13:50,190 the idea. 194 00:13:50,210 --> 00:13:51,530 Plus I want to delete. 195 00:13:51,780 --> 00:13:59,190 So remember omit is a load helper where it will find a key of what the second argument is on the first 196 00:13:59,190 --> 00:14:02,100 argument and just drop that key off the object. 197 00:14:02,100 --> 00:14:07,590 So this functions as a delete post so that's pretty much it. 198 00:14:07,620 --> 00:14:11,070 Without a doubt this is dramatically simplified. 199 00:14:11,190 --> 00:14:19,230 My reducer here amazingly compacted difference between the array implementation and the object implementation 200 00:14:19,560 --> 00:14:24,390 and the benefit of that is a secondary benefit of this is not only is it less code but I'm also handling 201 00:14:24,380 --> 00:14:28,540 corner cases like say fetching a duplicate list of posts. 202 00:14:28,740 --> 00:14:34,800 Very well I'm handling making sure that if I fetched a single post once already I'm overwriting the 203 00:14:34,800 --> 00:14:37,110 existing one and thus just updating it. 204 00:14:37,400 --> 00:14:43,870 So again I highly recommend experimenting with objects instead of arrays for handling your data inside 205 00:14:43,880 --> 00:14:47,090 of your reducers. 206 00:14:47,100 --> 00:14:50,770 If you enjoyed this video I recommend you check out rally coding dot com. 207 00:14:50,790 --> 00:14:57,920 We've got weekly videos on tons of javascript topics everything from re-act redux and general javascript 208 00:14:58,380 --> 00:15:01,440 bug handling frameworks all that kind of great stuff. 209 00:15:01,530 --> 00:15:05,060 So check out re-encoding dot com and I'll see you next week.