Learn Redux Toolkit in under 1 hour

hey there everyone hitesh here back again with another video and yes I'm back from the vacation and welcome to this amazing video in this video we are going to discuss about the Redux toolkit this is a no-nonsense crash course guide on the Redux toolkit which will help you to directly jump into Redux toolkit avoiding all those analogies all those jargons and just focusing on the code part so that you can understand how simple it is now Redux is Redux is a state management Library which is not really Centric towards react or nexjs but it's in kind of an open-minded library but you can have its plugin Redux react so that you can combine it and have State Management in the react that's what we are looking for but why suddenly a Redux a crash course Satish just before you went on to vacation we were dealing with something else yes I know exactly that let me show you that as well so before I went on to the vacation I exactly remember we were discussing that how we can actually actually build this application idea spark which is very much inspired from the dribble and we're not just trying to clone dribble here we are just trying to have its functionality and I want to show you how powerful next year is an app right can be so that we can have all of this thing all together one of the major component I wanted to reach in this one is of course upright of course nexjs but the State Management as well and I want to show you that how in the bigger projects you can have a state management library and make your life so much easier so that's one of the goal and if I click on this this is how it works we have already seen that it actually is much more slower in the development process in the production it's much more faster this is all the project is this is all it will be doing but one of the key aspect of this project is the state management I wanted to teach you the state management and if I'll directly let you jump into this project and teach you the stage management there it is going to be clumsy it is going to be really really comesy so I'm taking up this special video here or the segment of the video in case you're watching all that in the one go that where we are going to create a fresh new project we'll discuss what the Redux toolkit is absolute basic no jargons here straight to the point and we'll understand it that's the goal I hope you like it so let's go ahead and get started with this one so let me share my screen first and I'm gonna go on to my terminal and I'll first go into one of the folder which is on the desktop and I guess I named it as English because these days I'm making content in different languages as well yes I'm bilingual in fact multilingual yeah anyways so here I'm going to go ahead and say npx and then npx npx come on and we'll be going with the create react app and we'll be calling it as Redux Redux toolkit Redux toolkit crash is it a big name uh I'm not sure okay uh I I understand a lot of you might be thinking hey fish come on now let's can we leave this create react app and can we go to the wheat or something yes I am aware of it that wheat is much more faster much more better but I wanted to make it much more friendly for beginner in case you are a wheat fan hey go with the wheat but I'll introduce wheat in a later point in my in my channel I haven't yet introduced V to the people so I'm not interested in using it as of now so I'll let it do its work in the behind the scenes and in the meantime I'll take you on to this new website eraser by the way this is almost similar to excally draw and I want to treat you about how the Redux actually work because one of the thing which Redux guys have absolutely amazingly done is the bad documentation like the library is good the founder is good but still they haven't actually done any such good thing which makes the documentation life easier come on people add some diagrams here my humble request if you are on the Twitter just take this portion of the video and my humble request adds some diagrams make life easier you have already make my life easier with the Redux toolkit there is no jargon here it's so much easier now just add diagrams okay so let's first understand what is this whole thing and whole drama is there is one Concept in the in the entire react is known as that there are lots of components like this is a component and once you have this component uh you can have multiple components inside it so there will be another component there and there could be another component here and there could be another component here so the idea behind the state management or having it that if you really want to have anything inside it so let me just go ahead and try to zoom this so let's just say I want to pass on some information to this inner box so this is my uh very very inner so I'll just call this one as inner if I want to pass on this information I don't have much of the ways to pass on this so this is a component which is calling this component which is calling this component and which is calling this component and the job of displaying the information is on this very Inner Circle or inner component itself I have only one way that hey this box needs to pass information to this box and then this box oops and then on top of this this box needs to pass on information if it can allow me to draw it yeah I can zoom it like this that's nice not much actually I'm kind of a fresh new one to this product but anyways so what you can do is further down the road you can actually pass on you get the idea so the first big box actually passes the information to the second box the second box will pass on information to this box this box will pass on information to this box and finally this will be able to display the information uh technically in the technical communication world this is known as prop drilling the properties are getting drilled one by one one by one and that makes life so much difficult if there could be a better solution then obviously things could be much more easier what could be the better solution that if we actually go ahead and create a global state or you can say Global placeholder and if any point of time anybody needs any information they can just just Reach Out directly that hey you guys you guys need the information hey just ask to it directly however you ask yeah this is how you ask if you you need information hey you just go ahead and apply approach it directly to this guy yeah that would be much more simpler but again the problem is that if anybody can actually reach out for the information probably they could update the information as well and if anybody could update the information the core Foundation of react gets shaken down that hey there should be only one way of the data flow and all the UI gets updated so there should be some rules around how the data should be updated and there should be some rules about how can I read data from this centralized store that is it my friend that is your state management that is your Redux that is even your zest stand or any other thing that you are trying to learn that's it that's the basic so in the world of Redux you will find that there are a couple of jargons that you actually learn and there are not much now they're not much trust me it's super super easy so the first jargon that you are going to learn about is the store what is this store nothing the diagram which I said here this big box yes that's the store it keeps all the information at a centralized place whenever I need it I can just ask information from it that's the first thing that is your store now another thing is uh something known as reducers now this is really really nice so let me just go ahead and write the terms first so another term that comes and is being used quite a lot is known as reducer so what are these reducers reducers are almost not really accurate to say this but are almost like controllers their job is to just update the things or add the things remove the things delete the things so all the actions or the interesting thing that happens uh can only be done by reducers you cannot no longer Define the function and click on the button and do things wherever you like no you shouldn't be doing that if you're using State Management it should be done via some reducers now what is reducer is just an object nothing more than that it's just an object which has a lot of key value things each key is almost like an action like your ad to do you're removed to do you're delete to do so these are just actions just like that so this is another thing which is known as reducer all right so once you have this reducer what else what else is there there are actually two more Concepts uh that you're going to learn and you will be seeing that I'll walk you through with the Practical examples as well another concept that you're going to see is uh this guy so once you have this one where is it going okay so another concept that you're going to see is actually known as oh where is my browser where is my browser why did you came suddenly anyways uh so another key concept is uh let me just go ahead and just use it you'll using you'll be using this hook as well I'll write this directly so that if you are taking notes you can take that which is a use selector now what's the role of this you selector now consider this that use selected is a guy which can directly talk to the store so when I said that your component can anytime ask the information no no no no they don't just directly go to the store and use that they use an additional hook which is known as use selector so that they can selectively ask the store that I need this information that's it yeah another word that you are going to hear is known as this so I'll just go ahead and use this is use dispatch or some people call it as directly dispatched it's it's really the same no big deal there what is this dispatch so whenever you want to update some information in the store then obviously we'll do it by reducer but you cannot directly call the reducers it will break the flow in that case what we do is we use a hook known as use dispatch in which we say that I want to call a a very specific reducer and this reducer finally gets an update in the store that's it told you Redux toolkit is so much easier now yes there are a couple of more jargons like slices and all of that but they are not such a big deal as I'll walk you through with the things as we'll be building it you'll find it so much easier to do things so this is it let me summarize this again because this is something something really interesting what is the problem the problem was simply that we were having an issue of prop drilling if I want to keep on passing the information into multiple of these components then there could be a problem that I might be keep on drilling the props and unnecessary passing the information for the components which don't even need it so I decide to create a global object which is known as a store and anytime I need information I can just ask it and since that's a one source of the truth I can just update the information to it and I can bring on the information from it pretty simple so for this Redux actually came into the picture it says I'm a state management Library we also used a Redux react Redux to actually really wire up together the Redux and the react part of it and that is the library which does it so store is one such Global store which keeps track of all the states and everything then comes up this reducer reducer is nothing almost you can compare it with the controller where all the Logics are being written and how we can actually use them so use selector can directly talk to the store to bring any information from out of it and use dispatch is used to is used along with the reducer to update information in store Braille is simple Circle told you it's super super easy okay uh now uh we don't need much actually from this one so by the way this is what we'll be building up uh in the in the long run uh in this video itself so this is a very simple application all we are going to do is we'll be able to add some to-do's and we'll be able to remove some to-do I'll give you assignment of uh implementing the edit part and probably more such things like ticks and all of that you can try that out but the goal is to give you a simplistic approach so that later on when we come on to this one this is where we'll be handling this State Management in the login section the authentication section as well as in these project creation section as well so you'll find you'll find it much more as a revision there all right so if you wish you can read more documentation here but I think we are all set and good so we can just go ahead and minimize this so this is the entire thing that we'll be building up obviously we have build it that's why I'm showing you the entire demo and all of this so we'll be going through with that okay first let me open up these things which we have created so this is react react crash course all right so this seems okay everything is looking decent I need to inject some of the Tailwind packages as well so let me go ahead and start this let's go on to Google and inject Tailwind as well Tailwind CSS because yes we use the Tailwind in that so installation I'll be Telvin CLI uh no we are framework guides do we have some guide on react itself create react app yeah so npm install Tailwind then we are going to initialize this so let me just go ahead and quickly copy this move back to my vs code seems like some of my shortcuts are not working anyways so we'll be just injecting this as a Dev dependency let's go back on to the Chrome and let's initialize this Tailwind CSS so copy this go back on to vs code and in it okay configuration file should be generated there we go now after this we'll be saying that hey content needs to be updated like this so copy this go back and we'll be saying in the config the content needs to be copied like this no extra comma all right save that and what else we need in the index CSS we need all of these guys so yep go back and inside the source do we have index dot CSS yep I'll be not changing too much of the things I'll just keep them as it is so just want to inject because the to-do's will look at least decent if we have this one and I can use uh this one so this one should be all good we have configured our Tailwind now next up comes is the interesting part is let's go into package.json and this is where things get interesting right now we have react and react Dom these are the two important library to make a react app in case you have opened up your application with the wheat then these are the only guys you need but now we need to install uh the Redux part of it so how can we actually go ahead and inject the Redux that's that's the most important the first thing you have to do is go on to the docs yeah literally okay so this is where the Redux and this is the installation where is the installation getting started and okay here is the one so npm install Redux toolkit so don't install just the Redux or the Redux JS now what you want to install is actually uh Redux with the toolkit so this is going to make life easier otherwise yes you can still work with it but the configuration is little bit more complex in the original Redux or the original react Redux toolkit is much more easier so we'll be installing this one as well I told you Redux is a standalone library to interact or to allow it to interact with react it needs another Library so that's this Library okay let's go back and clean this paste it and boom till the meantime I can just go ahead copy this hopefully that should be good and that's it so till when we have installed optionally but now what we need is this one okay so notice here Redux toolkit and what else we have what else we have yeah react Redux that is all that is all what we need in order to build this application uh yes still there are couple of things which you need to do in order to make sure that things are properly working and things are actually going on and there are some folder structures and all of that that you have to follow but nothing too much I'll just walk you through with the step-by-step process of how it is being done and all of that so don't worry too much it's actually easier don't worry I'll walk you through with the step-by-step process step one is to create a store okay so let's create a new folder I'll call this one as app some people call it directly a store no big deal feel free to call it whatever you like and let's just call this one as store.js okay how we are going to go ahead and create a store in order to create a store there is a method which is given to you known as configure store so I'll just go ahead and say that I need something and I need it from this actually comes from the react Redux toolkit so Redux toolkit no preductor.js why is it not suggesting me okay probably I need to reload my application so I'll just say command shift p reload yeah reload my window hopefully now it's going to give me so I'll say import something from oh I need to say add the rate Redux yeah this is the one at the rate Redux toolkit what do you need from this one I need configure store so this is a method which is responsible for do majority of the things now just alone you cannot create a store that is an interesting concept and obviously you need to export this so that you can use it later on so we'll just call this one as a store and configure store and that's it now inside this you go ahead and mention your reducers now what is a reducer nothing it just is an object nothing nothing much more than that so I'll just put a comma just for the housekeeping purpose and I'll just close this one here and the method gets closed here that is it now if you remember I told you in the diagrams that hey now the store is all done and in order to make any update in the store it should be aware of these reducers so that's where the reducers are we haven't written any reducers here forget about using it via the dispatch we haven't written that so we need to now write some of the reducers all right so how we can go ahead and write some of these reducers now there are a lot of good practices you can say or a lot of guidelines that are given by a variety of developers if you want to follow them that's great if you don't want to follow that's totally okay just a file name so right click create a new folder and we usually call them as features okay once the features are there then there could be many features in any application like the logins authentication create a project or maybe chat application there could be lot so in this you divide them based on the functionality what they are doing so in this case we are just doing one which is to do so okay I'll just add it to do now inside this to do we'll create a slice okay now that's a new word of the issue didn't discuss that okay I'll just go ahead and say to do slice dot JS so one thing is clear that it's nothing magical it's just a slice it just is just Javascript file okay what is this slice now slice is nothing this is one guy which actually helps you to create a big object which you which you actually export as well and this slice is responsible for tracking your initial state of the store as well as all of your reducers are also collected here okay nothing more slice is just a piece you extracted that piece and you simply said hey this is going to be my slice which is going to be linking all the reducers and the initial state of the store store needs to know what is the default or how do I get started what is my starting point my initial state so this is where all the thick things actually comes up into this one once you see that how the slice is being created at one thing that's it it is a repeatable process you'll be able to do it in so much more so will be importing some more stuff so we'll be importing so we'll be again importing it from Redux toolkit and what do we want to bring in now one thing that we'll be bringing which will help us to do this is create slice create slice yeah here it is now create slice this is the only method that is required but since we are creating to do's and every to-do needs some unique ID we can store them in an array and loop through the indexes of array but again this might give you some of the performance issues I don't want to talk about it too much here but yes looping through the arrays and providing keys and array indexes not a great idea but hey some people do that and there is no big deal another thing which Redux toolkit automatically provides you is the Nano ID so each of the value that we are adding we can use this Nano ID this is almost like uuid unique IDs basically the next step is to create an initial State what is your initial State and what is this initial state it can be an array it can also be an object yeah literally in JavaScript we are in JavaScript realm everything can be an object the initial state of the to-do's is empty array it could be something like you might want to do some of the fetching of the database and you might want to store something here yeah that could be done but in this case we will be doing that actually when will be working on the major project but right now I just want to keep it simple it is absolutely easy now one thing that you do is you actually export a slice and what does the slice contain it contains couple of things first let's go ahead and Export this so we're going to go ahead and say export const to do slice and we'll say hey let's just go ahead and create a slice first let's just close this so that it doesn't yell at me couple of things you have to do first thing is provide a name to this because later on it might be very confusing that what slice denotes what one slice could be denoting authentication one slice could be denoting projects one slide could be slice could be denoting the chat app so there could be many so first good thing is although you don't reference it much here but later on it could be useful especially in the in the this what do we call this what do we call this when you go ahead and do an inspect element you know I forgot the name how could I forgot the name okay uh you right click yeah these Dev tools how can I forget the name it's it's important for the dev tools as well come on man okay then the next thing that you provided to this slice is this initial state so that somebody can actually track what's at the initial position another thing that you provided is reducers what do I call it what is reducer if you remember what is reducers nothing just an object yeah so reducer is nothing much more is just an object so let's go ahead and provide an object there we go that is it now what does this object consist of this object reducer since you know that reducer will be talking to the store so there could be multiple reduce reducers which will be responsible for updating the state of the store so there is a pattern or there is a method how you write your reducer so first of all you provide a name because this could be easy like let's just say we want to add some to-do's so let's just say this is the ad to do and we what we want to do is we actually write a method into it so we'll be using an arrow function so just like this there are two compulsory thing that you have to pass on to every reducer the first is actually the state and state is something which is super important here because otherwise how it will know what is initially in my store or how can I update that state so state is important another important item is pass on this action I'll come back on to this action what this action is it's a pretty interesting as you can see here as well action actually is something through which you can send some data because maybe you want to delete something so obviously you have to pass on some IDs so in that case we can pass on some payload what is payload nothing it's just data fancy name to call the data so this is what we have now once we have this all we have to do is how will I add some of the to-do's that's the million dollar question okay in order to do so I have to provide an ID okay how will I get the ID a super simple nanoid will give it to me how will I store the text here is my text and text can be extracted from action dot payload I'm not using any text I'll be just directly providing an object but if you are providing name object and all of that I'll do that I'll not use this one I'll just go with this one okay do we have a comma why are you having an issue expecting a semicolon why are you expecting a semicolon here it is okay why are you expecting okay this is generating add to do should be all good okay I don't know why this is having an issue let me quickly check that why this guy is having an issue all right my bad my bad and let me just fix this uh so action to do we actually did it a little bit wrong so my bad my bad just scrape it off just scrape it off so coming back again so how we are going to add the to-do I probably was thinking ahead of me that's why okay let's scrape it for off again so how we're going to add to do to do takes help from the state to know what is there already in the store and some action and through the action we can pass on some data we can pass on some information with it now in order to add the things what I need is I need to create an object a single to do that single to do can be pushed on to an array what array the array which is to Do's that's all we have to do so let's create a single object so const to do this is a single object this is a single object what does this single object includes this single object includes I'll just first remove this this single object includes two thing a unique ID as well as yes you got that you got that right the payload the information what to do we are storing so let's just go back here ID nanoid and then the text which is going to be action dot payload that is it but right now we have just created the to do we have extracted the information from action we haven't actually used the state to push it into the to Do's so all of this initial state is actually stored or somehow linked with this state the moment you say that hey I'll be doing this estate and who is doing all this Redux yeah Redux behind this thing or behind the scene since you marked it as reducer automatically will inject this entire State the global variable into this state and now all you have to do to access this is now your ad to do is this constitute is ready so let's just go back and simply push it that's all so I'll be saying hey this is the method this is constitute so let's just go ahead and say hey state in this to Do's push to do that is it told you it's really simple that how we actually do this I even do not have to worry with the classic old saying of the Redux that never mutate your state I don't care about it automatically this Redux toolkit take care of that thing so in case you are coming from the background which somebody who knows about the Redux I don't take care of this now so how simple is this all right so uh let's just try to add one more and I'll leave couple of more for your information or for your practice as well I'll just go ahead and say hey let's just go ahead and add one more which is removed to do again what we have to do is simply a method I'll adjust the revision what does this method has it has an access to State it has an access to the action through the action I get the payload so how can I remove this in order to remove this obviously in the action you might be sending me the ID of that to do so that's pretty easy although there is a suggestion really nice suggestion but let's go ahead and make it a little bit easier and do something which we usually don't do let's just go ahead and directly say state DOT to do's and in this I'll just say state DOT to Do's filter filter out on each element and whenever you see that create a new array in which don't include the ID that you are passing me how simple it is I don't even care that whether my state is being manipulated I don't even come up come back here in the earlier days I used to come something like this hey they're going to be a state so I'll be just getting a new state and then we'll be using triple dot I don't do any of that now all these things are gone these are the things of the past I'm super as you can see I'm super super happy and excited about this uh simply you can go ahead and add more things like update and all of that and all those classic saying never mutate your state I don't care I don't care okay uh so I hope you have enjoyed this that how we create the slices now there are a couple of more things that you have to do in this slice itself okay first of all you have to export a few things so first we're going to do is export const all the methods that you have created like add to Do's remove to Do's you need to actually export them as actions because one more time let's go back on to uh the browser here so as I told you that reducers will be talking to store using dispatch but we also learned that all the things that we are doing this action.payload yes this is also important so we'll be using them later on right now I'm not telling you where we'll be using it how we'll be using it but just all the methods that you create here all the reducers you created you need to export it and by the way this whole working this whole functionality all of these things you can move them into separate file and all of that there is no big deal there okay moving on you have to export one more thing which is export X export default will be using a default here if you wish you can use to do slice.reducer so we'll be we are actually exporting the each methods which are there in the reducers as well as we are actually exporting the entire reducer as well and this brings a question that hey why are you bringing this entire uh slice and the reducer as well because this thing this here last line the line number 28 this is something that needs to be wired up with the store yep so let's go back on to our store store here and we need to wire this up notice here we were mentioning these reducers as well here so what I'm going to do is I'm going to go ahead and say import to do radio what did we call it as to do slice and we are actually uh we'll be importing that as a to do reducer feel free to call it anything and we'll be importing it from the features to do and to do slice okay once I have imported this because this is my reducer if you remember this these are individual methods but reducer is this whole thing this whole thing my store should be aware of this so I can just go back here now and can say hey I don't have if I would be having this as an object or I would have many which I'll show you in the project the bigger project as well but right now I can just go ahead and say to do reducer okay that's it my store is now ready my store is now ready and it will be reflected very soon in the dev tools as well but this is all good now if I go back and check it out this my feature list is also ready now at least my functionality part is extracted and any of my component can actually go back and ask this state this to do he can reach out to that directly of course it has to use the method as well to actually reach out that we just saw this use selector so it has to use that method but it can actually Reach Out directly not only that if any component needs to add things or remove things it can also do this they can also use this use dispatch any point of time and since these methods are also being exported I can import these methods and can just use use dispatch and that use dispatch using these reducers will talk to my store how simple how convenient this is okay so this is the basic overview of all the things that we have and again we don't have to do any kind of mounting we don't have to do any kind of a wrapping or anything like that we'll be just going ahead directly and writing our components itself so now let's go ahead and write our components which will be just an input box a button just like that so that's Basics let's go into that all right so I was just sipping some iced tea you need some break after such a long video okay so now we are back on to the situation we have learned how we can create a store we have learned how we can create a reducer we also have learned how we can export the reducer so that our store knows about it also we have exported all the individual method out of the reducer so that I can use them anywhere I like so far this is the status now let's see one by one how we can actually improvise over it and make our Learning Easy so I'll close this I'll close this now basically you don't need to do much and that is the best part now go ahead and do your regular job like creating components that's one of our job let's create a folder and I'll create a components inside this I'll create the very first component so I'll break it down into two parts because in this entire application we have been focusing on just two things add the things remove the things we are not focused on updates and all that you can try them on your own because once you know how the how the deletion is done you know how to carry an ID with you and can perform an updation as well because you don't have to worry about the state mutation just do randomly how you do it okay first thing let's see that how we can add a to-do because in the addition part we will learn just one portion individually that in the ad I just need to collect some data and send it so how can I send it to the store I have to use a use dispatch that's all in my mind nothing else okay I'll right click and create a new file and I'll call this one as what should we call okay where did you go where did you go no please don't go anywhere Okay add to do so let's just call this one as add to do dot JS there we go uh rfce react function component export sounds good okay obviously we'll be tracking the states so uh we'll be saying use a state just give me that that's all Basics that's it now the interesting part from here that starts is how can I collect some data and send it to that okay if I am well aware and well versed in the react getting the data from the form and putting in the U State no big deal no big deal but collecting the data after from the state to sending in the store that's a new knowledge okay how can I do that first thing we have already learned that you need a use dispatch use dispatch that will be coming up from react Redux it doesn't come from the Redux toolkit it's a wiring thing yeah that's where it comes from and also since I'll be sending this data I need some method to do it where is that method where is that controller no I'm not going to write a controller just here in this component because I don't do that yeah that's exactly where you're absolutely correct that I need a reducer for that and that's exactly the reason why we actually went up into this features in the slice and exported them individually yeah now you're getting it I'm super proud of you all right so let's just go ahead and say import add to do Redux and action so okay we didn't actually brought them in the actions did we to do slice dot action so come on man you're doing uh and we won't be bringing it up here is it going to come from here uh probably not so we'll be just saying add to do it will be coming up from the features to do and this uh to do slice so let's just say features this is really bad sometimes Auto suggestions are really really horrible so we'll be saying features and from to do and to do slice uh we don't need to say dot actions here we'll see that how we can actually make it a little bit easier for you for the actions and all that part uh I'll come back onto this one a little bit later right now let's just have this okay so two important information is with us use dispatch which will be using this ad to do and we'll be getting this okay next up is how can I actually have this ad to do for this now the things are super simple first of all control your inputs so let's just call this one as cost and let's just call this one as input suggestions no suggestions set input and will be keeping the status empty as of now then you have to use this use dispatch hook this is how you use it cons dispatch use dispatch so that we have extracted it okay now we have to create a method but hitesh you said we don't want to create a method yes you don't create a method to update it but you create a method so that you can collect the information uh wrap it up and send it to the Handler which is going to be the ad to do so for this we say add to do Handler just like this and what we're going to do is first and foremost let's close this so it doesn't yell at me we want to prevent the defaults so event dot prevent suggestions no suggestion prevent default what after that nothing you simply dispatch this is your ad to do and in the add to do all you have to do is just pass on all the information that you want to pass on all the information that you'll be passing on is actually will be taken here in the text format action dot payload that is it that is it that's all it takes in this case I'm going to just directly say that hey you directly take this input and that's it be happy with it whatever we haven't done any kind of sanitization or something but once we are done with this obviously we want to refresh the input so that's basic that's uh so I'll be saying set input as empty that's it now whatever goes in here that's just a CSS so I'll be just directly copying and pasting it from the notes that I have because it doesn't add any value it's just a form I'll explain you no worries I pasted it because there's so many of the class name and just keep on writing this class name it's not a Tailwind class it's just a simple all we are doing is we are having this value linked wired up with the state which is input and on the change we are actually using the set input event.target value so we are actually putting this up and as we are saying type submit one thing we have to change is this method name because it was suggested to me so no big deal we can just simply say add to do Handler and that's it and that is it so I hope now you can understand there is no prop drilling I am not sending it anywhere I'm just going through with two things and this is so much repeatable get your dispatch and get the method where you want the functionality to happen that's it rest all the functionality is my in my slice yep that is why this is called a slice I call this as controller as well because that's exactly what it is doing and I don't have to keep how many values were there already should I be updating do I need to get a fresh State nada nothing at all all okay now we have actually seen that this is how it is done another portion of this tutorial which is remaining is okay I know how can I send the data and I probably can send this data as to Do's I also can send data for more things I'll walk you through with the deletes and all of that as well by the way there is a delete as well sorry forgot to actually mention that from the notes uh by the way in case you notice this is the ad to do I'll walk you through with the delete as well we'll be working on the delete as well but coming back coming back now we have seen that how can we actually go ahead and use that to do and send the data now we also need to learn how we can read the data from the store again it's also almost like a two-step process that's it okay for this we'll be creating a new component new file and let's just let's just let's just call this as to Do's because that's where major leads will happen to dos.js rfce react functional component yeah that's that's all okay first and foremost what do we need to read from it if you have if you remember from the notes use selector is the one which will be responsible for reading from it okay so let's grab it no problem we'll be saying uh use selector from react Redux there we go this is it we'll be applying the delete part here as well but I don't want you to confuse with it right now we are focusing just on one portion how to read the data that is it that is my goal okay how can I read the data all I have to do is to read the data is first of all let's come up here and all I have to do is use selector this use selector has the axis of the state and by the way this use selector looks like this which has a callback it goes like this just like this and in here you have an access to State Redux injects it I don't okay if I have access to this state I can go ahead and say hey State just go ahead and there would be many there would be many to Do's here so I'll just first go back here and actually make things a little bit easier for you so inside this I'll be just saying ah this initial State this is the one that I want to track and this is the one that I want to grab okay so rest of things looks easy it looks good okay let me go ahead and just bring this back all right hey back okay so we were talking about this use selector now before we actually talk about this use selector I'll walk you through with that and you selected is nothing it just is a method a simple method which actually takes a callback in which you have an access to state but what the state is and what's happening so far things can be a little bit confusing at this point so what I'll do is I'll actually remove all of this this view selector I'll come back on to this one don't worry we have to write this obviously but one thing that I want to see is now that we have seen so far if I go back on to this diagram that we saw is that all of my components are actually aware of this store how that's even possible just you have created a file and is Redux injecting some magic no that's where you have to do some of the magic that you can actually go on to your index.js or wherever is your root file or root folder is and here you can actually have a wrapper so I'll just add this one at the very top so I'll just go ahead and say I need a provider yes that's exactly the name provider that comes from from react Redux so this is the provider how do we use this provider actually it's super simple all you have to do is this is our app wherever your top level of the app is make sure you actually wrap this provider on top of it so this is all you have to do is provider and you have to pass on a store and then simply go ahead and add provider just like that that's it this is all what we have to do but again looks like there is a problem it says jsx element provider has no corresponding closing tag yes there should be a closing tag there we go all right now in this provider we actually mentioned this store and that's why I say that usually you only have one store uh yes there could be exception very very rare exception but since I've seen it that's why I'm saying there could be an exception but now there is a store okay so the store is there put next now is the time that we actually see our application that how it is there so I'll just close this and npm start run and there we go and seems like nothing it says a store is not defined my bad we didn't brought in the store no big deal no big deal we can actually bring in the store from the app that we created so let's go ahead and say import if I can write that import store from App Store so it should be all good now if I hit a refresh and imported as store is not found in the App Store inside the app store.js we actually brought in the store did we forgot to even export that no now it's working okay now the interesting part is you can inspect this and by the way you have to install this Redux Dev tools these are super helpful and super important and you can find them just here in the Redux now if I go into the Redux I can actually see these actions diffing and state if I click on the state this is where my to Do's are yeah this is the most important part that I have my to-do's here and this is one of the most important thing that now since my entire application is aware of it I can just go ahead and read from it not only that we'll do some magic here let's just go into the slice to do slice and what we'll be doing is we'll be injecting an object here the first part is going to be ID we'll be calling it as one and we'll be adding a text uh we'll be saying hello we don't have completed and all of that so we'll be just saying hello just like that and save that let's see what happens to our store now as we can see that this is is there so I can go ahead and extract my to-do's at any point of time I can just go ahead and call state.actions and it's available to me that is the fun part okay let's go back up here now I'll go into to-do's and I'll say hey I want to actually use it so how can I go ahead and actually use it again same thing we have this use selector so let's go ahead and use selector it's super simple we'll be saying use selector there we go it has a state which can get state DOT to do's and we can hold that in some variable let's just call this one as to doosh and there we go obviously we would love to do a console log here as well of the to-do's that what's actually is there so that we can see it says logs an empty array this is again an extension that I'm using that I wanted to have this but why this is actually logging me an empty array I know that in my initial State and this is also saying that hey you are having all these things going on in here now there's an interesting thing to do and if I go ahead and say dot to Do's now if I save this and go back and try to do a console log and let's hit a refresh here and we should be getting some things up here okay so not this one I didn't expect that okay looks like some things are interestingly going up here let me quickly check that that where I'm making a mistake here yes definitely I'm making it we're back after a crash and thank goodness the video recording got saved anyways yes I fixed out the bug as well by the way I'll walk you through that how I actually fixed it so uh turns out the issue was that I was actually never loading this to do so the to-do's that we were having I was never loading it at all so what I need to do is simply go into app.js and I mounted this to Do's here that's that's all I did and by the way I'll just remove this header and everything so that we just have the to-do's up here and we have this to do input add to do as well so let's go ahead and add that component as well since we are here already so we'll just go ahead and say add to do as a component that's it so that at least we can see all the things going on so there we go we have this add to do's and we have all the to-do's being mentioned up here uh the thing the interesting part about this I'll reload the application is the problem that we were facing is inside the to-do all we were doing is use selector by the way don't go with the X9 because I hit a reload multiple times so it's giving me those reloads but again we were able to extract this just with the saying state DOT to Do's I was able to do this because I looked into the Redux and I said Hey in the state how many values are there it's just one to Do's so state DOT to do's and inside this all my values are there so I'll just say just let's store them into a variable so I call this as to Do's now all that's remaining is to Loop through that and that's really really basic so I'm going to go ahead and just show you once here that we can actually go ahead and do that now then we'll do that in a easier and better format and all of that so we'll just go ahead and inject just like this and probably we should not do this we should first wrap this up inside this and let's just go ahead and extract this cut this out paste it up here and then we can go ahead and inject this then we can go ahead and say hey to Do's all you have to do is just map through it and while mapping through it we can simply go ahead and say Hey I want to map through each individual to do I'll be returning a a component just like this and once I'm actually going ahead looks like there is an issue this is to do returning there is one more Auto suggestions hate them sometimes and all we have to do is simply get an paragraph or an ally I'll right now grab just a div okay that's nice Auto suggestion love them sometimes since we have uniquely added the identifier with the Redux nanoid to do uh the uuids then it's much more easier to do it and if I go back here we go the hello is there which we added up there so that's super super easy now if you want to do it in a much better way so that it looks really nice so then in that case I'll just go ahead and give you the code that we wrote so I'll just go ahead and add this just like this and it's doing basically nothing all of this so right now I need to actually remove some of the things because this button shouldn't be working as of now because we haven't discussed that okay and this part should also be removed okay we'll come back on to this part as well okay now we are doing this all of this this is all doing good hit a refresh and it says hey there's on click I'll remove the unclick okay save this and there we go we should be changing the text to text White where the text is and this should get some class name and we'll be saying text Dash White all right so there we go now I hope you are able to see it it's looking really bad I haven't added much of the things but yeah so notice here you now actually are able to see all of the things which are happening now if I go ahead and add another to do so I'll just go ahead and say another to do and I'll just add this and notice here it says add another to do hello and all of that so this is again getting looped through and all of that so yes there is an issue for that react strict mode in the production mode and whatnot but this is really really nice that I can go ahead and add one more click on this ad it actually runs the things again here for me we'll resolve this one as well but by the way this is looking already so good and so nice that we are actually able to do this okay coming back on to this part uh where we having this selectors and to do's and all of that so let's go ahead and resolve this part as well all right so it was the easy fix what I was doing is actually not properly looping through it since just to show and demonstrate and explaining all these things I was just putting the keys somewhere in the bottom which is not a good thing so I just need to put the key which the element is looping through which is this list item so I added the key here and it fixed all the things all right so moving further what do we notice here what is happening okay so we saw that it's really actually easy if I go ahead and remove this console log now so that we understand the things actually in order to query from my state or my Global state or my store it's actually much more easier than dispatching even in the dispatch it was a two phase process here it's just a one phase process have the use selector use selector is a method which gives you access to the state which is an object and just grab whatever you need from it state DOT to Do's state DOT token state DOT uh projects maybe whatever you need you just simply put a dot and get an access to it once we have an access to this just simply Loop through this make sure while looping through you know that if it is not empty if the array is empty you handle all those cases that's super easy part okay one thing that is still missing in the part is to show you that okay I know that this is going nice here I can just go ahead and add a test here it works nice hello and test I have seen that how can I send the data in the store cool if I right click here the store is getting updated all the time inspect and go into my Redux I check the to-do's there is a zeroth item there is a first item which is unique IDs and test okay that that's working fine I have also seen that how can I actually extract the data from the dispatch use reducer dispatch all good all good but how can I actually mark this as delete because this is a combination now and this is super easy and if you have so far paid attention at least in the part where we had this ad to do this is exactly the same process what do we do we bring the method we simply use use dispatch so let's go ahead and copy this exact same functionality so copy this go into the add to Do's let's bring the functionality this time do we want to add reduce no this time I don't want to do add to Do's I actually want to have a delete to do or did we call it as remove to do yeah remove to do so I have my method I have my use dispatch okay but how do I use use dispatch let's cheat a little bit let's find how we did it in the air to do in the add to do we simply said const dispatch dispatch all right all right let's go ahead and copy this let's go move here and there we go dispatch that's it now whenever I want to use this remove to do I have to use it via the dispatch okay wherever I want to use it in the button itself where it says all this rounded and all of that what not this is the button what should I do on click so on click there we go and all you have to do in this on click is simply call the dispatch that is it but we cannot call the dispatch directly because we have to pass on some method because hey if you remember the classic 101 if I call the dispatch here it will be passed on as a reference but if I want to pass on some values I have to use this I cannot do this directly so in order to do this I have to use a callback here so this is my callback there we go I have a dispatch now in this dispatch what is the method that you want to use remove to do this is a method and what does this method takes the ID so I'll just go ahead and say hey to do since I'm looping through already through it and I'm calling it as to do I'm going to Simply go ahead and say to do dot ID and that's it and do I press the tab no I don't press the tab it just messes it up I hate this and probably okay now we need to count them come on yeah that's good now okay save this notice here how easy it is dispatch the reducer that's it all done so it makes your life so much easier let's go back on to this part and now if I try to delete the test test is gone it's actually gone from the store so all the thousand places where this was being displayed that's gone that's gone from the reference and yes this is it let me just give you a summary of this in case you want that so the idea behind having a Redux and the Redux toolkit now is things first of all are very simpler the step one is to create a store we created a store we simply said that hey I'll give you a reducers I don't know what reducers are right now but I'll give you in at some point of place and one thing that we actually learned at the very last is all of your components should be no should be aware of the store so that's why we go on to the index.js and simply wrap your entire application with the provider that's a must have to do with this so that's the step one and two a wrap create a store and then wrap everything with the provider here that's simply 101 we did that the next step comes up is to Define your functionality that we call as slices slices not just functionality now it's a much bigger of an object how do we create the slice the step one is to Simply first and foremost declare your initial State how your state will look like when the application will start once you have done this then simply go ahead and use the create slice method which is a new method available inside the Redux toolkit once you have this you have to provide couple of things provide a name to your slice because there can be many slices provide a name like to do good name provide it an initial state which you have declared just here this is just an object and then provide a list of the reducer as many reducers as you have just provide that most important thing is export your reducer out of this to do slice that whatever the to-do slice you are creating export this reducer this will be used in store also export all these individual method because wherever you are going to use the dispatch these individual methods will be useful now we know the picture okay once this is done that is it that is it now we have to learn how we can use it we first actually learned the use cases in the attitude so how we can add to add the things first of all we need to talk to the store and we need to send some data to it so obviously we'll be first step one is to use dispatch and then what functionality you want to use use dispatch is simply just create a dispatch out of use dispatch and then simply say dispatch an action which is to do and take this data with you and we'll be able to extract this data simply in the payload we know that and how we can actually extract the data this was sending the data in order to extract the data it's simple process use the use selector use selector has an access in the Callback of this state and this state will actually give you the state DOT reduce or state DOT token or state DOT authorization whatever is there everything is available to you this is really a lifesaver so this is it this is your kind of uh you can say a crash course on the Redux toolkit I've tried to make it extraordinarily simple so that when we actually make that next.js app with the app right we can actually take advantage of this state management and the life will be so much easier this video recording was with a lot of hiccups a lot of phone calls uh crashed it once but thank goodness the recording was saved but I think we finally made it it was a good job if you appreciate such kind of videos there's a lot of effort that goes into them please please please just leave a comment an emoji would be really nice or just a thanks it would be really happy all right that's it for this video let's catch up in the next one

Channel: Hitesh Choudhary

Views: 106,903

Keywords: Programming, javascript, devops, cloud, nextjs, redux, redux-toolkit, state-management, reactjs

Id: pX0SBJF01EU

Length: 58min 9sec (3489 seconds)

Published: Fri Aug 18 2023