State Store Selectors with Reselect

[00:00:02]
>> Steve Kinney: We've done most of the hard Redux and React parts. We've learned about map state across map dispatch to props, so on and so forth. At this point, most of the hard parts of application are either writing React components which are kinda outside the scope of this course.

[00:00:19]
Or it's all about manipulating that JavaScript object which we wrote some helpers for, it's just going through and using them, right, removing one is taking out the entities object and off of the ideas array. Right, moving one is a combination of removing it from the old list and adding it to the new one.

[00:00:36]
Adding users in list is exactly the same. There's not a lot of value in watching me do that, not everything is glamorous in JavaScript, a lot of things are. But I'm not putting sparkles behind mouse cursors or anything like that. So it's totally fine. But here we have the application where we've got most of those kind of tedious parts done.

[00:00:54]
We even have the ability to move cards between lists. Which is kind of interesting, we look over in the code.
>> Steve Kinney: We can see that we wanna have all of the different lists so we can move it too. And we use object of values because remember we have those keys and those values.

[00:01:19]
So if I wanted an array of lists, I can use object of values, now I get an array back again. Which is super cool. But we tend to end up doing that a decent amount. Each card really just needs the same array, why am I calculating it? Move card to list, is a child of card.

[00:01:40]
Which means that it's this drop down over here. And I don't need to generate that array over and over and over again. But if I go and we'll just say something like, we'll turn this into a,
>> Steve Kinney: GetLists, just so we can log it separate from the ability to, this generation of the array of list that we're gonna pass to every single card component.

[00:02:11]
We'll say,
>> Steve Kinney: Call it getLists.
>> Steve Kinney: We did. And we'll say, intake state, and it's just going to return this.
>> Steve Kinney: And we'll return this but what I wanna do real quick is I want to console.log.
>> Steve Kinney: Generating an array of the list.
>> Steve Kinney: And we'll just use this over here.

[00:02:47]
And the point is, we're going to see this run a few too many times.
>> Steve Kinney: So, it ran four times. I'll give you a hint on how many cards are on the page. Anyone want to venture a guess, four. Yeah [LAUGH]. Look at that, we did it five times and we added a card.

[00:03:19]
This is the same array of lists. Why am I doing this as many times? My golden rule of performance is not doing stuff is faster than doing stuff. And so over time, performance is always one of those things, as you're doing that individual ticket, you're like, it doesn't matter, it's fine, and 1000 it doesn't matters?

[00:03:41]
Gets to the point where all of a sudden, you can't use your own app. It becomes really painful. So it'd be great if we didn't do this. React has some built in things to do, it has the react dot memo, which is if I get the same props, it'd do the same thing.

[00:03:56]
Those are still techniques that you should totally look at. But we're mostly concerned with just the Redux part. We haven't gotten to the React component yet. So any should component update or react dot memo or any cool fun stuff that we do there, it doesn't even matter, we are getting the props ready to hand to the React component and we're already doing stuff too many times.

[00:04:19]
So we'll talk a little bit about a library called reselect, and reselect, it's one of those things where it's also kind of interesting that it is kind of agnostic. It's commonly used with Redux, but as you'll see, it is the theme of the day. It's just JavaScript, which is like the most understated thing in the world but yeah.

[00:04:50]
So what we're gonna do is what reselect does is it gives you an ability to pass some functions to your kind of more expensive function. And these are usually cheap like, hey, if this is the same as the last time I saw this, give me the cached value.

[00:05:06]
If you get State dot list dot entries, and you're on the second card, and you've already done this. Don't make a new array. Just use the one that you made last time. So what we'll do is we'll do a quick refactor here.
>> Steve Kinney: We'll import createSelector from reselect.

[00:05:34]
>> Steve Kinney: I just wanna make sure. Just check real quick to make sure everything still works. Cool, CreateSelector's defined but never used. I didn't get the autocomplete there so I got a little worried for a second.
>> Steve Kinney: And so now, it's got a little bit of a syntax that might stress you out at first, but I promise you it's not too bad.

[00:05:54]
What we're going to do is, we're going to break out the creating the object values from actually getting it from the state. Because what we want to see is if this is the same as we saw last time, don't, if the list entries are the same. You could just say, if the state is the same, but we wanna kind of just worry about the parts we care about.

[00:06:16]
So I'm gonna make a new function called,
>> Steve Kinney: GetListEntities. And that'll take the state and it's just gonna pull out the list on today's, just get us that object.
>> Steve Kinney: Cool, and we'll have that. And now what we can do is we can create a selector which is effectively creating it like memorized function.

[00:06:43]
So we'll write it here and we'll pay some stuff in a second.
>> Steve Kinney: CreateSelector takes a set of arguments. It takes a bunch of functions that it's gonna run first to figure out if it needs to run the final one. You can pass them in in order. But typically I will use the kind of preferred syntax of an array, an array of functions and we'll use this getListEntities.

[00:07:13]
>> Steve Kinney: So it's gonna call this getListEntities and whatever comes out of that is going to be the first argument that goes to this getList. So, this will end up just being,
>> Steve Kinney: In caught list if you want, it's probably better. The fact that we stored it entities as a-

[00:07:36]
>> Steve Kinney: So this will go ahead and do this first part. If this ends up being the same as it did last time, it's not going to run this final function, where we do the object dot values. We don't have a lot of lists. So this isn't super expensive, but there are parts in your application where you might have a much larger data set and even doing an object dot values, that many times, it's gonna add up.

[00:07:59]
So here, we'll pass in this function next, kind of get rid of it right there. So go ahead, run this one first. If you got the same result as last time, just use the result and don't use it again. So then we'll replace this one.
>> Steve Kinney: Let's go ahead.

[00:08:21]
Hey, you know what's not in front of this getting an array of lists?
>> Steve Kinney: A four. A four isn't [LAUGH], all right?
>> Steve Kinney: We did it once. We didn't do it four times. And so, it's basically, it's memorization. It's cache and a bunch of stuff like that. It kinda makes it easier to do some of these things.