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