Learn Redux-toolkit 🔥 for absolute beginners | 1 hour | with project

this is the only video that you need to start working with Theus toolkit end of this video 100% you're able to play with Theus toolkit so first you're going to understand what is prop drilling meaning to say what is the problem that Redux toolkit solve after that we go to the implementation in implementation we basically have four step step one create a store that was very easy step two WRA your provider that is also very easy and only one time process third thing we need to create slices that third step is the main thing there you need to put your like 80 to 90% of the effort and the last step is how to access data and how to update data that's it done after this five section or five portion you can say you know R toolkit so let's start it now let's understand why we need Redux toolkit so Redux toolkit basically solve a problem called prop drilling what is prop you know what is correct so we have state and we have prop state is just a data prop is a way to transfer data one component to another component correct so suppose this is our entire application in our entire application assume this app is the this a component is the app.js that thing is like I can make it little thin uh yeah so this thing is the app.js okay app.js fine so in the app.js we has the state called name correct now in the app.js we has a state called name now the thing is I want this data in the in this component correct so I want okay so I have the app.js app.js is rendering two component correct now from this two component this component a also rendering this two component and component C also rendering this two component and finally the component G rendering the I correct so basically I can say roughly uh this is the parent this is the child this is the grandchild and that I is the great grandchild cor so fine now the thing is if the parent has some data and the great grandchild want to access the data so we need to follow hierarchy so we first what we have to do we have to send the name or send the props to component C correct after that component have the data then component C is going to send the data to the component G and then finally component G is going to give the data to the I so now just assume that is your great grandfather your great grandfather want to give you some money now your great grandfather don't have the ability to give you the money directly your great grandfather going to give the money to your grandfather your great grandfather going to give the money to your grandfather then your grandfather going to give the money to your father and then finally your father going to get give the money to you getting it so this problem is called prop drilling what is the problem here these two people unnecessary getting bothered your father has the important work your great grand sorry your grandfather has some important work your father has some important work but still your father and grandfather get bothered by this thing getting it so now the idea is if in a react application I am using two component meaning to say the load of the web page will be increased a little correct now because this two guy get into action getting it so I know if you don't getting it believe me just rewatch The section 100% you will get that fine so now you understand one guy have the data another guy want the data unnecessary some people get bothered by that correct so now this problem is called prop dealing why it is called prop dealing because we have a property we keep on dealing the property until we have the expected guy correct now the idea behind Redux toolkit was what Redux toolkit say rather than drilling the data what we can do we can just create a center space okay we can create a center space here we can say this thing a shop okay now under the shop suppose that gr Gra grandfather have some data the great grandfather says um I need the pen yeah now the great grandfather says I want to give the name data to my great grandchild what I'm going to do I'm going to put the data under the store and I'm going to say my great grandchild whenever you need the data you can you don't need to go to your father grandfather or me you can just go to the store and you can pick the data getting it so easy so now like that without bothering your father and grandfather you can have the data correct so I hope now this thing is making sense now if the great grandfather want to give you the name or some sorry am o money okay you can understand this right this thing is the money now if your great-grandfather want to give you some name or some money what you have to do you don't need to that your great-grandfather don't need to pass the data to your grandfather to your father to you you can the your great-grandfather put the data to the central store and you can just pick the data from here getting it so this idea is the Redux toolkit using Redux toolkit we are going to create a shop and this thing by the way called a sh o this thing by the called a shop using toolkit we are going to build a shop and now any component need the data they can visit the shop and use it also any component have some data the component want to share the data the component can put the data under the shop and any other component need the data they can just simply use it getting it now the now if you understand that much that is very well you understand the problem of the prop Drilling and also you understand how R to can solve the issue it just to can just create a shop and also I can I to say one thing shop is nothing just a object as simple as that shop is just a object getting it under object has a name value under object has a money value like that so swap is not something like complex just object and fine if you understand that much you understand prop dealing but I need to I need to add little more what that more thing is suppose now this e have some data okay this guy e e has some data now e want to share the data to the B correct now if you know props so you understand parent can give the data to the child child cannot give the data to the parent re giving the data in reverse order is not available on the Redux correct so using Redux RIT we can solve that problem also what you can do you can just e can just send the data to the store and B can just pick the data from the store where very simple correct so fine I think you understand what is prob and tool kit now let's go to the installation and how to use tool kit so I already created a simple react app and you can see that is nothing just a simple react app now the thing is before start learning the Redux toolkit we need a playground meaning to say we need a UI there we can Implement Redux tool kit and learn so in this video we are going to build a simple counter app so that your concept will be clear about the Redux toolkit now to build a simple counter app we need a UI of the counter correct now so you have two option you can build the UI by yourself and the second option is I already build the UI and put the step in the rm. MD file you can just follow the step and I'm going to follow the step only so you can also follow the step it will be good so I give you the code and after you get the code uh you have this. MD file what you can do open the file and now you can click on this button if you click this button see the readme.md file now converted to this format okay okay now what it says create a counter. CSS file and paste all the code so let's do that to have the UI we can do we can create the counter. CSS c c counter. CSS file and I can just copy all the CSS code and paste under here and again if you want to you can write your CSS by your own also and the second step is copy all the code and paste under the app.js app.js correct so I can just copy all the code contrl C and I where is my appj here and I don't need that those files right now and in the app.js I can sayr a uh not here I can sayr a cut and I can paste fine so I did nothing I just create a count. CSS file paste the CSS and I also as a under the app do JS I paste all the JavaScript actually I paste all the jsx now if I see the output I have this UI I have this counter UI obviously it is not working because we are going to make this thing work and here if I want to just explain the code nothing I did nothing I just import the CSS that we have here and then I have a division under the division we have a parent the parent have one button that do the addition a button that do the subtraction and one paragraph that has a zero done so I hope you follow along with me that much from the next video we are going to actually implementing Redux toolkit in our project so far we done with the UI now we had a playground to play with Redux tool kit now before going moving on remember in Redux toolkit the main uh scene is we had a store whoever want to whoever component want to share some data that component put the data on the store and whoever component want to access the data that component F the data from the store so for example if one to share some data so if going to put the data on the store and D want to access the data so D is going to f the data from the store so one thing you understand store is very important everyone who want to share data he is going to use the store every everyone who want to access data that guy also want to use going to use the store so store isimportant so right now this like this session we going to create the store and we going to wrap our store with the index.js so that every component should has the access of the store if you don't get it forgot everything just remember we are going to do two things create a store and rra our store done so now before creating a store I just need to show you how the Redux toolkit documentation look like so I can go to the Redux uh Redux toolkit and I can go to the first website redus toolkit. js. org in website that is a documentation but honestly speaking this documentation is not very nice but this quick started this portion is very nice in this portion you can in this portion we have a precise step so to before start using Redux toolkit we need to install the Redux toolit also correct so I I request you came to this page and run this command what this command will be do this command will install Redux toolkit on your project so using this command you installing Redux JS toolkit and you're installing react Redux so we need this two files to work with rux toolkit what I can do I can stop my server and I can run the command so that my redex toolkit will be installed on my project fine after redex tool kit is installed what I'm going to do I'm going to create a store how I'm going to create a store I'm going to use this command or this code uh this oft code now there is a good news that creating store and wrapping the store is a onetime process means you create a store and you done you wrap the store you done you don't need to reopen the file and write some code that is just a onetime process if I came here yeah my Redux is installed now again I can start the server and now I can create the store what I can do to make the file more organized I can create a folder of St state State you can give it any name you can give it any name I can just create a folder called state I'm going to write all my Redux code under the state folder so under the state folder I can create a to. JS file okay under the shop. JS file I want to create the store how can I create a store they give you the code but still you're going to understand how it look like means how the code is actually working I can just copy this line correct okay please allow me to copy this line because that is very headache full uh having this line so in this line I'm just importing the use config method done nothing else just like we import usate hook we import use effect hook the same way I just import the config store hook not hook we just import the config store method from the Redux Now using the method I'm going to create a store how can I create a store I'm going to create a variable of con I can say is a h Shop is equal to I can use the method config store and this method take a object like that and now under this object also I'm going to pass a reducer colum and the value is a empty object so this is done now this shop is our shop we are done creating the shop so easy right no nothing difficult and now the thing is we also want to export the shop because I am going to use the shop in the index. CH don't worry if you don't get it forgot just understand we need to export the shop so I can just before say export like that and done so now I'm creating a shop and also I exported the shop done we are done with the creating the shop now the thing is if you came here it say create a shop now also it say now okay came to the index.js import the provider import the shop you created actually they say it store but you can say say it shop and then wrap your app.js with the provider and pass shop as a props correct okay wrap your app.js wrap your app component with the provider and pass the shop as a props so fine we can do that and another thing I'm going to do I'm going to change the shop to store only I'm going to just follow them blindly okay fine so now I'm going to came to the index.js file where is my index.js here in the index.js file what they say import the provider so I can just copy the provider sorry I can just copy that line and I can import the provider also they say import the store so I can just import the store also and now the thing is if you copy this line it may give you error because the path is different for everyone correct so I can just came here I can man I I can import the store by typing like by just typing I can say import and SD stored uh from where from for my case from the root directory I have a state folder under the state folder I have a shop file so from the shop UT the store done fine and now what I'm going to do I also imported the provider I'm going to use the provider here provider here like that and I'm going to wrap the app.js or sorry or I can say I can just wrap the app component under the provider like that done and now I need to pass this store as a props so how can I do that I can say uh store is equal to craes s s to and done we successfully created our store and we wrap our store to the app.js now all the components under the app.js has the access of this tool so done we successfully complete the section one in the next section we are going to learn how to use slices now the thing is what is slice now in normal English whatever you understand bu a slice that is the same thing we mean in R studio also meaning to just say suppose you bought a pizza now you have two options First Option you can eat the pizza without cutting the pizza meaning to say without cutting the pizza you can eat the entire Pizza correct like that you can definitely eat the pizza but it will be like problemistic second option you have you can cut down the pizza and then eat the pizza slic by slice getting it so the same situation we have in Redux toolkit just assume you're building e-commerce application now in your e-commerce application you have lots of data now you have two option you can manage all the data at once that will be problemistic or you can do you can cut down the like data to slices meaning to say in your e-commerce application you have suppose user data product data card data orders data correct now you have this four major data you have two options handle this four component at once second option you have you create a user slice you create a product slice order slice like that now when you working on the product slice you only handling the product data you have nothing to do with the user data you have nothing to do with the order data so like that you can make your like make your application less complex getting it so eating a inter Pizza it's not a good idea eating the pizza slice by slice is a good idea like that you can actually enjoy the pizza same thing handling the entire data is not a good idea handling the data slice by slice slice by slice make a application scalable and the user will have less headache because you can easily handle data so now I hope you're getting the point of the slices now slices is nothing slices is just a portion that you handle a certain data now in slices you have only two major components first in slices you create a object so you handling suppose user data so you create a user object you handling order data you create a order object fine now under the suppose asume we creating the user data now under the user object you have all the information who is the user what is the order thing what is the card thing every information you have under the user object now the thing is whenever you want to update the user object or you want to like play with the user object that time we are not directly going to play with the user object we are not going to say user do name is equal to and we are going to change the thing we not supposed to do that how we are going to do now in the second portion we have the second thing we are going to create a method that help us to change the data meaning to say I have the user object under that I have the name I want to change the name I am not going to directly change the name I'm going to create a method or a function using the function I'm going to change the name now whenever I have the requirement to change the name I'm going to call the method and using the method I'm going to change the name I am never going to change the name directly fine so you understand in the slice you need to worried about only two things the object and the method that change the object correct and we are done getting it so that is very easy believe me in first time R toolkit look like difficult but after a time when you actually play with this thing it became very life- saving because handling a big application you read toolit it's like reducing so much of the pain fine so in R toolit documentation they says under the feature under the counter they create a counter slice under the counter slice they create a object which is called initial State and then they create a slice under a slice also you can see they pass a name that is just a name okay nothing is just a name they pass the initial slice meaning to say they pass this object and then they create a reducer object object under the reducer they create method increment method decrement method increment by amount method like that under the method they write the logic to actually change the data I know you don't get anything but believe me that is super just stay with me you will get that so now we also can do the same under the state I want I can create a uh counter SC i c I hope the spelling is correct s c l i c e counter slice. JS fine I create a counter sjs now I want to create a slice how can I create a slice I can came here to create a slice I need the create slice method I can just copy the method fine I can just have the method I can just control C and control V yeah I have the method now what I need I'm going to create a variable using that I can say const I can say uh C and counter s s i counter slice is equal to create slice like that so I hope still now you understand I just import the method and I create a slice using this create slice method there is only two lines nothing else nothing complexity is there correct now now under the method I'm going to pass a object fine now the object going to have three things name initial State and reducer name is just a name we don't need to worry about this thing uh initial state is the thing there all the data will be stored remember we told you now like we also learn that under a slice we have two major components the object and methods that change the object correct so initial data is that object that going to hold the data so I can just quickly say the name I can give the name to count uh C and counter I can just give counter name fine now I need to give initial State what I'm going to do I'm going to create a initial State variable here and you know what I'm going to misplay the initial State variable I can just go like that and now they create a value I can give it anything I can just say const they use const yeah I can just say const I I can give the name is equal to I can pass a object now under the object I can pass as many dat I want suppose just assume that I am creating a slice for authentication just assume I'm not obviously but just assume I'm creating a slice for authentication so in this initial State what information I want to store so I want to store uh the name of the user correct now I want to store the name of the user uh I can give anything I want to store the ID of the user I want to store um as suppose what history of the user and it can be array so like that whatever the data I pass under the initial State basically I can use the data getting it but for now I don't want that much I just need a value uh V U value and I can give the value default value zero getting it so there I didn't do anything I just create an initial State variable actually sorry I just create initial State object under the object I pass one property value which is zero getting it and now this is not mandatory first I can give the value name to anything okay that is not mandatory second thing I can pass as many data I want I can pass is login is log is login false like that I can pass as many data you want because again you can understand this is just a simple object now here in the second argument I'm going to pass the initial state spelling is correct spelling is matching and you know what I can just copy paste I don't want to take risk fine now done name is easy you understand we can pass any any name we can pass any name say we need to pass the initial State what is initial State nothing just object and in the third step we are going to pass reducers we can came here we can see they are passing a reducer under the reducer they passing an object under the object they are passing methods correct what I can do I can came here I can say reducers reducers is a object under the object now I'm going to create method that going to play with the value getting it fine so suppose I'm if I want to increment the value how I'm going to increment the value first I can create a method I can say increment I just create a method and I can make this thing as a fat Arrow method like that fine so I think you understand I have the reducer object under the object I just create a method correct now under the method I have one thing I have something called State uh spelling is wrong St St State now the thing is what is state state is this initial State getting it this state this state is this initial state mean this entire thing is equal to this thing getting don't get confused this initial state is State done getting it fine now the thing is I want to say whenever someone call the method do one thing have the state DOT under see I say now this state is this object so under this object I have the value so I can say State DOT value getting it so now state DOT value is this thing I can say state do value is equal to again I can say state do value + 1 what happened state do value 0 is equal to 0 + 1 so whenever know someone call all the function this zero is going to become one I can came here and they actually made this thing but fine we can have this synex also that is more meaningful fine so I hope you're getting it now whenever I to increase the Value Plus like with one I'm going to just call the function this function going to Target the state what is State this this object is State under the object I'm targeting the value and I'm saying the values equal to like update the value to the value + one so whenever I call the method the initial value will be added like added with one getting it fine and the same thing I can create the decrement method d c d c r r e m decrement i can pass the fatter function like that and I need to pass a comma here because I'm passing this thing is object also and I can say State and here I'm going to say that do the same thing I can just copy paste and just I need to make this plus to minus done so I have two method one method do the increment another method do the decrement and we are done now if I came to the documentation we are done I understand documentation have another method but right now we don't want to worry about this thing later on we going to learn in this only you are going to learn this thing okay but just I just request just forget about this thing that this increment by amount also there yeah so we have our two method so finally we had our object and we had two method that help us to play with the value of the object correct fine now what I need to do after it done creating the slice I need to export the slice first first export I have to make I need to export ort the entire slice meaning to say this thing I need to export so I can just export the thing export the counter slice and also I need to export two things I need to export all the method I created how can I export I can say uh const uh one second really const I have to say export con sorry sorry sorry I have to say export con I'm going to D structure from where I'm going to destructure I'm going to say counter slice do actions from counter slice do action yeah counter slice do action I'm going to destructure this through things what is action please don't get bothered by that after this section I'm going to show what is action if I show now what is action right now you may got confused because I'm assuming I'm teaching a complete beginner fine so from the counter slide. action I'm going to export increment and also I want to export uh decrement and if I can do a format document it became look Co look good fine so you can see we didn't write write much create a slice create initial variable sorry import a slice create initial variable then create a slice and also export the slice now under the create slice you need to pass three arguments one the name second thing is the initial state which was the object third thing we pass a reducer what is a reducer reducer is a object that contain methods and that was reducer reducer is a object that contain method those method help us to update or modify or play with the initial State as simple as that fine so we export the method now the question is why you are exporting the methods because whoever component like I suppose there is a b c d I want to update the state from the D component so from the D component I import the increment method and I'm going to call the increment method from the D component so from the D component I call the increment method and the method update the state getting it easy right fine and now at the last I need to export the reducer also I need to also say export not expect export default coun slice. reducer this line honestly speaking you don't even you like you don't even want to understand this line you can just blindly write the line okay fine so yeah we are done with creating a slice and now if you able to follow that much believe me you are doing so damn good we are almost done we successfully set up the tool git now the situation is like you build a car now you just need to know how to drive a car correct the same thing we set up the readers toolkit now we just need to know how to access this initial State anywhere in the application I break down it more simply right now see this zero this zero is not a St a dynamic data that is a static data I can make the 0 to 10 anything I can make and now the zero is not actually a number correct what I want I want to fetch this value in the app.js getting the problem statement what I can do I can make it data so that when I change the data you can actually see fine so now the problem statement is I want this initial State under the app.js that is my problem statement how to how to do that how can I access the value property under the app.js it was very easy but before that there is also another step the step was we successfully create our slice now we need to add our slice under the shop getting it we create our slice it's very totally fine now remember we create a SL uh sorry remember we create a shop under the shop I need to add my slice correct how can I add my slice it is super duper easy I just need to import the slice I need to say import uh counter reducer r c r i I don't want I don't want error for the spelling so I can just copy the spelling I can just say counter reducer from F from where do Slash from the counter slice now the thing is what is the counter reducer if I came to my counter slice I don't export any counter reducer here what is the counter reducer this thing is the counter reducer getting it remember we export this line counter slice. reducer so this file is exporting the counter reducer and we are having the counter reducer here now what I need to do I came under the reducer and now I'm going to pass my slice here I'm going to say like counter and the counter will be count enter reducer like that and now remember this thing this name is very important whenever I try to access this value I have to use this name getting it so this name could be anything but whatever this name was this name is very important fine so we done putting uh like we done putting our reducer under the shop and now I can just close the file I no longer need the file now the real part part now the part is I want to access this initial State under here how can I do that before that I need a hook I need a use selector hook so what I can do I can just copy this line and I can came here and I can just paste and I don't need the dispatch so fine what I just did I did nothing I just import the use selector hook getting it I just import the use selector Hook from the react react Redux if if you want you can type the code also you can just type this line that is completely upon you I prefer you can copy also fine uh so the thing is we import the use selector hook using the hook I'm going to access this data how I can do that I can came here I can just create a count oh sorry cost of data or I can say count any variable name I can give here is equal to now I'm going to use the use selector like that this U selector take a a a fat function okay so understand this thing I did nothing I just import the you selector hook I create a variable I call the use selector hook under the variable and the use selector hook take a call back function correct fine now under the call back function it take a argument of State okay now let's understand what is the state this state if you came to the shop. JS uh this state is this reducer as simple as that this state is a object and this state pointing to this reducer meaning to say this ruc the state the state is this object getting it not difficult right this state is this object that much of the code fine now under the state we have a counter under the counter we have actually the counter slice so now what I'm going to do first I don't need the craes you if I pass the calra it give me error if I say State like that it giving me error so uh you should not pass the craes you have to write without the craes you have to set State I want to say from the state go to the counter from the state go to the counter reducer so I'm going to say state DOT count cter getting it so state DOT uh c n t you know what I don't want error I can just copy the thing I can just copy I can just paste here so fine so so far you are like state do counter and whenever I say state. counter I get into this file okay now whenever I get under the file I get direct access of the initial State meaning to say I can say state under the state go to the counter under the counter now I can directly say value V value or again I can just copy the thing but I know the spelling of the value but still so I hope you're getting it state do counter dot value getting it so it go to the state then it go to the counter whenever you say do counter it go under the counter slice and whenever it go under the counter slice is automatic pick the initial State okay so now we are saying dot value I hope you understand if you don't understand please rewatch the video I guarantee you that is a very important step and you'll understand fine so now I can assume under the count under the count I have this value what I can do now then now the thing is very easy I can came here I can remove the data and I can put the uh count and done if I came here if I came to a website no error don't worry they're just warning I can just refresh and see I having my zero now the thing is where the zero is coming the zero is coming from this place if I make the 0 to 100 see here it became 100 getting it so now we can understand this the we can understand we we are actually accessing the value in our app component component and now also there is another interesting thing suppose right now we only have only are in the app.js suppose you have 10 components from the 10 components whenever you need the count data just import the US state hook and just have the value done so easy correct no need to do props no need to use props you can just directly face the data so fine so far we learn how to face the data now we are going to learn how to execute the method what I want I want whenever someone I want whenever someone click on the plus I want to increment the data and whenever someone click on the minus the data should be get decremented correct we already created the method under the reducers in the in the counter slice under the reducers you already created the method now you want to use the method correct how can you use the method we are exporting the method right we can just input the method correct easy so I can just say inut import CES from where you want to import I want to import from do SL from state slash counter slice from state doc counter slice import the increment and import the decrement done we are inputting the method now we just want to execute the method on click getting it the thing is we are exporting this two methods and now we are importing imported the method in the app.js now whenever I'm going to call the method this method going to update the state and now I can make this thing zero only fine so yeah it was Zero what I'm going to do now I'm all done I'm going to use a you know what I can just make it in a single line I can use a onclick event under the on click event I can say handle increment and I need to create the method also obviously so I can just say cons C cons name is equal to it is going to be a fatter function like that and done and now I can just CG means I can just console. log to check the on click event is working or not for extra security obviously if I say plus yeah one click event is working what I just need to do I just need to call call the function I can say whenever someone to onclick please call the increment method and increment method going to increment the value correct and now we are done now if I click now the magical thing is I'm clicking the button but nothing happening why nothing happening because and I can just refresh the page and again I can click nothing happening why nothing happening because you can't execute the method directly that is not alloyed in Redux toolkit now the thing is if I can't execute the method directly how can I execute the method to execute the method you need another hook you need a use dispatch hook if you came to the documentation see we are using a use dispatch hook and I'm copying the thing because you know spinning issues fine so also I'm importing the use dispatch hook and I'm going to create an instance for Ed dispatch hook I can say const const and please don't give me S right now uh dis P dispatch uh D PC dispatch is equal to use dispatch fine we create an instance for use dispatch and now I'm going to say dispatch please execute the increment not this increment in please execute the in increment method now done I think so damn easy I just import the use uh okay I just import the used dispatch create an instance of the used dispatch of the name of dispatch and in the dispatch I'm saying dispatch please execute the increment method and now done if I came here refresh no error is there if I click on the button see it is working correct how it is working now whenever I click the button this method got executed and when this method got executed this code executed and what this code execute what this code does this code add the value with one getting it so EAS right now also you have to do the same for the decrement but I just request you pause the video try the decrement by yourself and then we will continue so I hope you pause the video you try by yourself if you're able to do that very good super awesome believe me you are like more than like better than any other people meaning to say you're more than you're better than the average you're doing so good but if you don't able to do that don't worry you just a normal person okay how you can do that again also very easy I can say on click I can put a onclick event under the on click event I can say handle the decrement and it giving me error because I didn't create the function I can just create the con on decrement is equal to like that and yeah fine so I create I create on click of handle decrement I create the method now I just need to say I just need to call the dispatch I have to say dispatch please execute the decrement method like that and done now we are all set now if I just refresh the page I can do addition I can do subtraction getting it so e right now I hope you understand how the rers toolkit work the this step is one only we have two important file the file there you are actually using the data the file the C lices there we actually write the data or meaning to say write the logic fine so I hope you understand this tool gate if you don't get it please rewatch the video 100% you'll understand okay

Channel: codeWithGeek

Views: 1,826

Keywords: ReactJS, reactjs, redux, redux-toolkit, RTK, learn react, learn redux, learn RTK, javascript, html css, web development

Id: L9JoR1RzAdk

Length: 47min 53sec (2873 seconds)

Published: Tue Jan 30 2024