I'm really excited about this week's topic because it's one of the hidden gems of the redux world where 2
you me talking about the library Resul act recently act as a support library for redux. 3
So usually if you're using redux you might want to look into using resect Let's talk about what respect 4
is and how it's going to help us out. 5
Respect is use to compute derived or calculated state for redux projects. 6
So that doesn't really make a lot of sense as a definition. 7
This is one of those libraries where it makes a lot of sense to work through a little bit of example 8
ahead of time. 9
So let's talk about the example where you're working through and how redux or excuse me Reise life is 10
going to help us out. 11
So let's look at a diagram or mockup of the project that we're going to build. 12
We're going to be building a small application where we fetch a list of posts from some third party 13
API. 14
And really it's just going to be a bunch of fake data to the left of each of these posts. 15
We're going to have a little checkbox whenever a user clicks in the check box. 16
It should consider this post to be selected and add it to a selected post list at the top of the application 17
so you can see in this particular case I have selected a selected post and another selected post. 18
And so I see both of those at the top of the page. 19
All the rest of the posts are not selected. 20
And so they're only on the all posts lists and they're not reflected on the selected post tab appear 21
. 22
So let's talk about a little bit. 23
How might we approach this if we were using just react redux by themselves. 24
How might we tackle this application here. 25
So we might have a post redo her post reducers purpose would be to probably go and fetch those posts 26
and kind of hold him in a big array or perhaps object. 27
So we've got a big collection of posts inside of her post reducer in this diagram I've reflected six 28
different posts. 29
But in the actual application we're going to build we can have up to 100 or however many different posts 30
we want to load. 31
Now whenever a user clicks a checkbox next to post we're not going to modify the post model itself. 32
Remember whenever we have some type of temporary UI state and certainly selecting a post is temporary 33
you state we would not modify or underlying data structure or our underlying model. 34
Instead we might create a selected post reducer the selected post reducer would hold an array of IDs 35
for each selected post. 36
So if we click the checkbox next to post 1 and post 5. 37
I would expect my selected post reducer to have an array with the numbers 1 and 5 reflect reflecting 38
post with ID 1 and posts with ID 5. 39
So then when we decide hey I need to render a list of all the selected posts on the screen like it's 40
time to show this data the data that we really care about which is contained inside the selected post 41
reducer in the post reducer is a product of both Envy's. 42
So we want some calculated piece of state we want to take two separate users or two separate pieces 43
of state and calculate a new piece of state out of the two of these. 44
So this is a classic use case for the select library. 45
Respect is used for exactly this situation right here. 46
Whenever we have one or more different pieces of state and we care about a value that is the product 47
or Tukey related result of these different pieces of state. 48
So let's take a look at how we might approach this problem. 49
If we were not using slacked. 50
So this is going to be a bad approach. 51
This is something that we probably would not want to do. 52
So let's say if we just want to kind of hack it together and get this thing working. 53
We might have a post reducer we've got our selected poster douceur and then we'll make a selected post 54
list component and inside the selected post this component will have some fancy logic for saying OK 55
for each selected post. 56
Let's figure out whether or not it's selected or what have you. 57
So we've got some low dash logic in here where we all filter over the list of posts and then if each 58
post is contained within the selected post ID's array then. 59
OK let's keep it it must be a selected post. 60
So this is definitely a solution but I would say it's a pretty bad approach. 61
Number one it relies upon the selected posts list component to have some very explicit knowledge about 62
the data structures of the post reducer and the selected post reducer as well so the selected post list 63
component has a lot of knowledge of the application state. 64
Secondly logic to figure out the currently selected posts list is not reusable in other locations. 65
If we're putting this code inside of the post list component then we can easily reuse this in other 66
places in our application. 67
If it turns out hey maybe this other area in our application cares about the currently selected post 68
list as well. 69
So this is perhaps not the best approach. 70
Let's take a look at how we would solve this using pre-select. 71
So it is a very straightforward very simple diagram just to start. 72
We're going to walk through a actual live coding example here in just a second. 73
Bullets start right here. 74
The idea behind Resul Act is that we create what are called selectors selectors will take in different 75
pieces of state do some calculation and then spit out some data. 76
So if we create a select selector to calculate our selected posts we'll take in the total big pool of 77
posts the selected posts IDs and it will spit out the selected posts list which would presumably be 78
just the post model with ID 1 and the post model with ID 5 right here. 79
So this is the idea behind refl.. 80
Let's take another look at what this looks like in practice so very similar diagram here. 81
But just to make sure it's really nice and clear We will take one or more pieces of read ex-state we 82
pipe it into our selector and then outcomes are derived or calculated piece of state. 83
So when you're working on your own projects if you ever feel like okay I've got this big list of data 84
over here and I've got a big list of data over here and the data that really show is kind of the product 85
of these two things. 86
Perfect perfect use case for using respect. 87
OK so enough diagrams. 88
Let's walk through a very practical example in my browser. 89
I've got a small. 90
I get kind of half the application already written here. 91
So you can see on my screen I've got a list of all posts and all posts currently have a checkbox next 92
to them and I've already wired up some action creators and some reducers where if I select a post you 93
can see down here at the bottom right. 94
This is my redux Debb tools. 95
I have my post piece of state and I've also got selected post ID's piece of state as well. 96
And so I just checked the first post on here and now inside of my array of selected post IDs I have 97
post with ID too which would presumably be this one right here and post with ID 1 which is the one with 98
the very top as well. 99
So let's do one more. 100
And now we've got three items in selected post IDs and we have IDs to 1 and 3. 101
Great. 102
So our job here is to create a new component that's going to sit above the all pose component and it 103
should display the currently selected posts. 104
So the actual like kind of post text that it's on here right now. 105
So let's give this a shot you know flip open my code editor and the first thing going to work on is 106
going to be my selected post selector. 107
So this is where we're going to really dump into to jump into the select stuff inside of my source directory 108
. 109
I'm going to make a new folder called selectors so I always like to keep all my selectors in one discrete 110
directory so any future developers who come into my project know OK I've got all these nice utilities 111
selectors I can make use of it if I so require inside of my selectors directory. 112
I'm going to make selected posts. 113
JS. 114
So this is going to be my reset selector takes a list of posts and post IDs and picks out these selected 115
posts. 116
So let's get to it at the top. 117
I'm going to import create selector from respect. 118
So this is a method that we're going to use to create a selector. 119
Remember a selector takes a piece of state one or more pieces of state and it ships out some new or 120
derived calculated piece of state to create a Slichter. 121
We are first going to create two functions to pick off the pieces of state we care about. 122
So the first we're going to do is create select functions to pick off the pieces of state we care about 123
. 124
For this 125
calculation. 126
So I can make a post selector. 127
This post selector they are going to create is going to be called with my global application state so 128
I can use a fat or a function off of here and take off my list of posts so state up posts. 129
I'm also going to get my selected posts selector. 130
So from state to state DOT selected post IDs which are my the IDE the array of selected posts IDs. 131
Now I'm going to create a function that's going to do the calculation between these two pieces of state 132
here. 133
So this is the part where you can stuff all of our complicated logic out logic and say Konst get posts 134
. 135
The first argument is going to be whatever comes out of the post selector function right here and we'll 136
talk about exactly how this stuff all gets wired up in just a second. 137
Just bear with me for a moment. 138
So the first argument will be whatever comes out of this first function here. 139
So be my list of posts. 140
Then the second argument is going to be my list of selected post ID's so I'll take my selected post 141
ID's. 142
Now I can also make use of low dash 143
to help with the actual calculation logic here. 144
So my selected posts the actual post model the actual object that has the text the id the created that 145
all that kind of good stuff to find by using filter going to filter over my list of posts and for each 146
post I want to retain the post if it's contained within the selected post IDs. 147
So for each post I have looked through the array of selected posts IDs. 148
If the post ID is present in that selected post IDs array then I want to keep it around. 149
That's what the filters can do for us here. 150
Then finally I can return my selected posts. 151
Ok so now here's how we can kind of wire this salt stuff all up together. 152
Certainly these first two lines appear Definitely little bit confusing. 153
Let's see how it all gets wired together at the bottom the export default create selector. 154
My first argument is going to be post selector. 155
Second is going to be selected post selector. 156
And finally get posts. 157
So here's our create selector works. 158
We pass in some number of kind of state selecting functions. 159
However many we want here we could have had several more if we so chose. 160
Whenever our global redux state changes each of these preliminary functions are these preliminary selectors 161
are going to be executed. 162
So they're going to run again. 163
Whatever value they produce is then going to be sent into the last function. 164
The last function that's provided as an argument to create selector. 165
So our last argument to create selector is always going to be the function that does some amount of 166
logic for us. 167
So let's mark this down as a comment. 168
Last arguments is the function that has our select logic and then every other argument before it is 169
going to be picked off a piece of state. 170
Pick off a piece of state. 171
So now whenever my global redux state changes whenever I've got a new selected post my pickoff functions 172
are going to update they're going to run again. 173
If they produce some new piece of state so if they've changed they're going to get sent to get posts 174
again. 175
Good post is going to run. 176
It's going to find the currently selected PPOs and Boon there is my calculated or selected derived data 177
. 178
So now let's create a component to actually consume this list of data. 179
I'm going to make a new component inside my components directory called selected PPOs list and inside 180
if we're just going to use that selector. 181
So we're going to make a small functional component. 182
It's going to take this list of selected posts and then just render a single life for each of them. 183
So let's set up some boilerplate import react and react. 184
We'll definitely need to make access to relax state so bring in the factory docs and then I'm also going 185
to import the selected selector which is what we just created. 186
So I picked this from selectors selected posts call now selected post a list and this is going to be 187
a functional component and I'm going to assume that inside of year my prop's is going to contain a property 188
called post or posts excuse me and that post is going to be the array of selected posts that I care 189
about that are being produced by the selected post selector. 190
So now inside of the return statement of put down UL and will add some nice bootstrap classes just to 191
make sure everything looks good. 192
Then inside if you're going to do my math over my post array so this post right here is my selected 193
post. 194
That's what whatever is being produced by my selector. 195
So for each post we're going to return and apply the class name of list group item. 196
A key post on ID and post title. 197
So post title Zawinul post text that we saw in the application earlier. 198
So now we need to do the interesting part which is to wire up our selected post selector. 199
So I'm going to define a map state to props 200
and inside if here. 201
Will return posts and now here is where we make use of our selected post selectors So we import at the 202
top. 203
Here's our selector. 204
We're going to say selected posts selector and we're going to pass state to it. 205
So remember state is an argument to our map state to prop's function. 206
So we'd take our total global application state we pass it to the selector and the selector basically 207
just takes it from there. 208
Once selected post selector gets this new piece of state it's going to rerun the two functions that 209
slice off small pieces of state and then it's going to rerun our Get post function right year to do 210
the actual calculations so whatever gets returned from this calculation function right here is what's 211
going to end up inside of posts. 212
So now at the bottom will export default connect Matthysse to prop's with selected posts list which 213
is the name of our component that we just created and actually selected post list. 214
We want this to be now. 215
I think we went with a plural all the way through so selected posts selected posts list. 216
OK last step we need to make use of this component inside of our application going to flip over to the 217
AB component which is currently showing our list our posts component and will import selected post lists 218
and now inside of here I'll put on New-Age for say selected posts and I'm going to place my selected 219
posts list component and open a chart between the two. 220
So let's try this out in the browser now. 221
In a flip back over. 222
Let's refresh. 223
Hopefully too many typos. 224
I think we got a typo somewhere. 225
I cannot find modular components selected posts list either I've got a typo 226
and I think I do. 227
I got one extra So my colon where it definitely should not have it. 228
Let's take that out really quick as we go. 229
Now we're back to good. 230
Let's refresh. 231
So we load up our list of posts. 232
Here they are. 233
And now I can select a single post and it gets added to my selected post pool so you can see that. 234
Now I'm not requiring any extra data here I'm only recording the essentials. 235
Just I've got my big ole list of posts the big post pool and I've got my selected post ID's so I'm not 236
duplicating any post models. 237
I've always got just a single post model throughout my entire application. 238
If I want to select it I just add the ID and then my selector will automatically run some calculation 239
on my list of posts and my selected post ID's and boom that shows up as my derived or calculated piece 240
of state. 241
So this is kind of a trivial example with re select but I'm absolutely positive as soon as you start 242
working on any redux project you're going to start running into situations where you have two or more 243
pieces of redux state and you want to execute some type of calculation on it. 244
So whenever you're in that type of situation I encourage you to check out the result library. 245
If you enjoy this videocassette I encourage you to check out Rallye coding dot com. 246
We've got weekly videos on react and read X topics if you're interested in hearing about any different 247
topic. 248
You can always send me a message via YouTube Facebook Twitter whatever you want. 249
Just let me know what you want to hear about Arcachon next week