CreateSelector in Redux Toolkit with TypeScript

hey what's going on in the first video in this series we have set up a Redux store and we saw that how we can create a slice and configure our store as well as how we can select the data from this store and how to dispatch an action to the store to mutate the data within the store and also in the second video in this series we talked about async funx and how we can use them in this video on the other hand we are going to talk about custom selectors in the Redux store and how we can create a memoized selector to optimize these stored data retrieving before going ahead if you're not familiar with the Redux toolkit I recommend you to see those previous video in this playlist okay without further Ado let's get into it for this video I have added a very simple card functionality to the existing project of this playlist I have added a card slice to our store which keeps a list of card items each card items consist of two property qty and product and each product in turn consists of three property ID name and the price that's it and because I have covered basic topics like creating slides actions and configuring the store on the first video I'm not going to cover them in this video from the scratch just quick overview will do the trick as I said these card slice keeps a list of card items named items and this car items also have an action called add to cart which takes in card items as its payload action and then pushed it to its items list I also added two products to this project for this video products and card in the products components we take a dummy product list which comes from the dummy data here as you see it's just a list of dummy products and in the products components we map through this products list and then show them to the user and let me show you how it looks like so you can see that here is our three products and also each product card has a button named add to cart which if I go to the products component you can see that in this button we dispatch add to cart action and then pass a card item with the current product and also qty are one we also have a card component which responsible for how many products are in the cart item list note that I haven't implemented the functionality of selecting thorough item in the card in this component yet so let's get started in the card component we want to select the total products qdy which have been added to the card items of the card slice so let's define a selector here so let's use the use selector hook to do this so I'm say const turtle RM Q to y equals to use app selector and passing callback function which takes our state and then I mean the body of this function we're going to return state DOT cart that items that reduce and then sum up the total item queue device so I say total it's going to be a number and current or curve for short is going to be a card item and then return the total plus equals to curve dot q y and the initial value is going to be zero and let's just cancel like the selector run before we return the total item in the card slice so now let me add this total item cured by to our js6 so I put a span here inside that span I put the total item queue over here and let me quickly add some couple of CSS classes fonts bold and MX of 2 and let me save this and open up my browser you can see that we have three products here and if I click on the add to cart button you can see the rmq device changes by one so if I open up my console here and click on the add to cart you can see that selector run here in the console so by every change to our list of card items our selector is run again that makes sense but what if I add a person to a person's list which is kept on the separate slice so if I add John here you can see that selector I run again in the card component which is not the desirable basically when you do a change to restore all of these selectors around again but if you do some expensive computation in one of your selectors it is better to create a memorized version of that selector by doing this the memorized selector is not going to run on every changes to the store in order to create a memorized version of a selector we use create selector function which comes from the redox toolkit so let me go back to the card slice here and here we are going to create a memorized custom selector for this card slice so I say export const turtle item two device selector equals to create selector function which this create selector comes from the Redux toolkit here the create selector function takes two type of parameters they are input selectors which you can have more than one of them and then there is their result function you pass in the input selectors and then the result function processes the data and then returns it as long as the input values don't change the generated selector won't rerun the result function so let me Define our input selector here so I say const items which equals to a function which take the state which this state is type of root states which we have defined in our store.ts file which is the type of our whole state so I go back to the card slice and say this function returns state that card dot items so this is our input selector so let me go back to the create selector function and as I said we can have more than one input selector so we have to pass in the input selector in an array so I say items in the array and then we have to Define our result function so this result function takes our input selector again as a parameter so I say items and then it Returns the value we want from the items so here we want items that reduce total which is a number and then current which is a card item then return total plus equals to Cur that qdy and then the initial value is zero so here we have uh defined a custom selector which is memorized and this takes the card items as input selector and then calculate the total Qdoba items in the card item list and then return it so here let me add a console.log inside the result function in order to find when the result function is Rerun so here I say return items that reduce and then before the return I say console.log custom selector round okay that's it so I go back to the card component and here in the use app selector I remove all of the callback here and just say total item QDI selector which comes from the card slice here so let me save this and open up my browser to test it so let me clear the console here if I click on the add to cart you can see that custom selector is run custom selector is run twice and if I add a person here in the person slice you can see that the custom selector doesn't rerun the resulted function on every state change so if I go back to the card slice you can see we have two type of parameters in the create selector we have item which is an input selector which we have defined here and then the second parameter takes in callback function which takes the input selectors as parameter and then return what we want from the input selector as long as these inputs electrodes don't change this result function won't run so in this way we can memorize our selector and optimize our Redux store functionality we can also have extra parameter for our custom selectors so imagine that we want to pass for example a limit parameter to our selector and say that the result function returns true if the tool items qdy is exceeded from this limit parameter so let's implement this custom selector so I say export export crunched Turtle curable limit selector equals to create selector function and then we pass our input selector in the array so I say items which we defined here and then in order to pass our extra parameter we have to define a function which takes all of the previous input selectors plus the parameter so I say items and then our parameter which is a limit and its type of number and this function Returns the limit which is our parameter and then as before we Define our result function which takes our input selector as parameter so I say items and also limits and then return a function and in this function we first calculate the total number of Q device so I say const so equals to this function which is the total number of Q to Y and then return if total is greater than limits that's it and in the card component here I'm going to Define a variable so I say const is exceeded and equals to use add selector so our previous custom selector doesn't take any extra parameter so we just passed it to the use app selector but this time is different our custom selector takes an extra parameter so we have to pass a callback so I say State and then call our custom selector which is total q25 limit selector and then pass our state to it and our limit so I say limit is going to be 5 for example and in our jsx we're going to have another div and then inside that div I'm going to press two span elements just like before is exceed and in the second span here I'm going to say if is exit is true then pass yes now as no so let me save this and open up my browser here and you can see that the total card items are zero and if I click on the app to cart and as long as it's exceeded from D5 you can see that easy exit is set to yes so let me quickly review what they have done here I go to the card slice here we create a custom selector with two input selector one is the item which we have defined here and the other is a function that takes all of the previous input selector plus the parameter we want to pass to our selector and this callback function returns just the limit so in this way we say to the create selector function that our selector is going to have a limit parameter as an extra parameter so here in the body of the resolve function we takes all of the input selector plus the extra parameter as a input parameter and then in the body we calculate the total items qdy and returns if the total item is greater than limit parameter so in this way we have we can have extra parameter with our in custom selector so I think that's it for today and if you liked the video please subscribe to the channel and hit the like button and stay tuned for our next video bye bye

Channel: Sakura Dev

Views: 11,891

Keywords: redux, react, typescript, how to create a custom selector in redux toolkit, how to create memiozed selector in redux, redux reselect example, redux reselect, how to use createselector in redux toolkit, react redux, createselector, createselector redux, createselector react redux, createselector reselect, createselctor tutorial, createselector redux toolkit, createselector reselect tutorial

Id: cJMigay5wzk

Length: 13min 54sec (834 seconds)

Published: Sun Nov 06 2022