Learn Redux Toolkit in 1 video with Project | React Redux Toolkit |Redux Toolkit Tutorial

State Management is one of the most important and confusing topic for many and when we talk about react and its State Management then there are different ways of handling it and one of the way is Redux hello everyone welcome back to my channel I am Nisha singla and in this session we are going to build one dummy project and we'll see how we can use Redux with the help of Redux toolkit package in our react app and this codes will completely from scratch so anyone who knows basics of react and follow that if you are struggling with react fundamentals then you can check out my playlist on react that will definitely help you to start with today's session so this video is going to be little lengthy because in this one video we are going to talk about complete Redux toolkit so please make sure that you will watch this video completely without skipping any part so that you can understand the Redux toolkit in detail so let's quickly see what we are going to build in this project so we are going to build one product dashboard kind of thing or you can say my shopping portal kind of screen where I will fetch a list of product from some API so I will use some dummy apis for that you can choose any API or any flow but I will recommend to follow the same so that you can understand it so this API call and displaying the data on the screen everything will be with the help of Redux toolkit so when you click on the product it will launch all your products here and you will have your bag also so initially I haven't added any item from my dashboard to the my bag so it's zero as soon as I click on that you will notice my one item get added into my cart or in my bag so you can keep on adding like this and when you click on this one it will show you all your added items in the cart and after this you can also remove any item from the cart like I can click on remove so it will also remove from here and it will also update your total count here and even if you move back to protect it will still be there so it will maintain your data I know in the real projects this is not the only thing that we have to build there are lots more that you can add but yes to understand Redux toolkit if you are able to do this much you will be able to understand how Redux toolkit is working so this is what we are going to build in this video so now let's start with the session and see how we can use Redux in the react application with the help of Redux toolkit package but yes before starting with the session I just want to clarify a few things because most of the people get confused between Redux and Redux toolkit so what exactly reducts and what exactly deducts toolkit I'll give you a very quick overview on that so that you can understand how these two things are working so just quickly move to your Redux website and here this is the official website for Redux right when you go to get started you will notice here in the installation part Redux toolkit so Redux toolkit is our official recommended approach for writing Redux logic it means reducing itself saying that now you should use Redux toolkit because this is the official recommended approach of writing the Redux logic so so this is not something we are introducing reduction itself enforcing the people to use Redux toolkit at least for the new build that whatever they are building a new project so now let's talk about the comparison because when you know Redux or when when you are switching to Redux toolkit you must know why we are moving to Redux toolkit there must be some valid reason that's why team is enforcing you to move to Redux toolkit so for that let me show you a few points that you can make a note that will definitely help you during the implementation so now let's understand what is the difference between old redox and the new Redux okay and the Redux toolkit so when we talk about old Redux so in that case it was not much organized lots of repetition was there and lots of code was repeating multiple time and manual configuration was required for so many things but on the other hand when we talk about Redux toolkit they have improvised everything over there so when we talk about Redux toolkit it is much more organized and much more you can say because the code in the Redux toolkit is much more cleaner and most of the things are automatically configured for you so no you don't need to write so many things to get a basic Redux application lots of things are already configured for you so that's why Redux team is saying to use Redux toolkit because they will definitely help you to improve your code the way you are writing the Redux logic now it's much simpler and cleaner uh let's talk about few differences the official website of Redux is reduxjs.org but when we talk about Redux toolkit it's a complete new website reduxtoolkit.js.org now when we talk about Redux right uh debugging of Redux is very important because it's a quite complex when we talk about a complete Redux architecture so in that case there is a one extension uh that is a browser extension called Redux Dev tool when we talk about all Redux over there you have to configure it manually but with the help of Redux toolkit it is automatically integrated with you you don't need to write anything for that in all three talks we have to write immutable State and manually we have to write the immutable State immutable State means always you have to written a new state so in that case the person who is writing the code they must understand how to write the immutable State update right but when we talk about Redux toolkit they have removed this one they said you can write your code in a mutable Manner and internally Redux toolkit will use one package that is called email.js that will automatically change your code to immutable configuring a store is definitely is complicated over there because in the store you have to configure lots of things manually but on the other hand as I told you like mostly things are Auto configured for you so the configuration of your store is also very clean and very smaller now yes this is very important part when we talk about old Redux right you have to create your reducer separately with the help of switch and then you have to match your actions right and you have to create your creators or actions separately so lots of repetition was there in the code but on the other hand just one method you have to use create slice method and automatically the reducer and creators will get created within the same function so it's much more cleaner and smaller as we know that Redux is basically to handle synchronous but if you want to handle something asynchronous then you have to use a thumbs middleware so in that case also in the old deducts you have to integrate your redox or thumb middle will manually in the Redux toolkit it is already integrated for you and handling a synchronous code with all Redux was also very you know you have to write lots of code over there because you have to handle the error codes you have to do try catch and lots of things you have to do over there but Redux toolkit give you one method that is called create asynthong that makes your life little easier and the other reason is we all are moving from class base to functionals right and all packages like react router and lots of other packages have now moved to class to functional component in a similar manner Redux also moved from class components to functional components so in Redux all Redux the implementation was on class based implementation was there but in the Redux toolkit they have moved to the functional components and with typescript they have introduced hooks that will definitely make your life much easier so keeping all these differences I think you get an idea that it's just they have improvised the code in terms of loss lots of code we have to write in Redux but that is not in the Redux toolkit you will see that in the Practical that Redux toolkit is much cleaner you don't need to write so many things at multiple places and that two repeating code no it's much cleaner so that on a high level what is the difference between all Redux and new Redux toolkit so that you can relate the differences and then we can directly jump to the Redux toolkit if you are new to Redux toolkit and you never worked on Redux then just forget about it but it's always give you a clear understanding why we are learning something new so now just give a pause for a second and go through with all these points in your mind and just recall what we have discussed so far so that you can understand what we are going to do now so for today's session I have created a react project with the help of create react app and that's how it will look right by default it comes like this so here we have this app.js file and which has a basic component so now let's see how we can build our own product dashboard with the help of Redux toolkit so first I will create a basic layout that is required for our project and then we'll see how Redux toolkit can be used so the first thing that we need is my product component where I will load all the product detail so what I'll do quickly I'll create one components folder and as of now I'll create one product.js file and here I can quickly create a product component and now we need to call it from our app component okay this is my root component as of now it's coming by default with this right so we can get it from this jss and instead I can load my product component so let's check it on the browser you can see we are getting this heading that is coming from my product component now let's move to this product dashboard and now we want to get the data from some API that can give me some product detail there are so many fake rest API that you can you can use for this demo and if you have any local API ready with you that also you can use but again I would recommend to follow exactly with me so that you can understand the flow so ah we have so many Peak API product fake rest API and here we have this fake story API product uh dummy Json is there right lots of API let's explore this one here you can see it will give you so many resources I want to use this product route and here you can see we have list of products so I need to consume this URL so as of now I'm not implementing it through Redux toolkit let's have it with the help of react only and then we will convert this code to Redux toolkit so how usually we make a API calling react component that we do with the help of use effect hook because I want the data on Lower of my product dashboard right so for that I will be needing a state to hold the data and to make the API call I need use effect hook so these two hooks you need to import and let's first call Api so use effect hook takes this callback function and I just need to call this only once during my initial rendering or mounting right here you can call the API now to quit API you can use exhaust package as well I will use fetch method only and I'll pass this end point that will be written data that I need to pass to Json and then whatever result I'll get that I need to set to my state because I need a state that can hold this result so that I can use it in the jsx so for that I will use my U State hook and it will have products and get products method initially I don't have anything so my product will be empty that's why I'm passing empty array so now once I get the data I need to update my products with this data so for that I have this get products method that will help me to update the state so here you just simply need to do get products and give this products to this sorry this result right so now your product should have this data that you will get from this endpoint if you want to quickly confirm this one you can do something like this you can do console.log or you can also check it like this I will do products here so if you see here you can see I'm getting the data it is same this one yeah so this step is done now instead of displaying it like this I have to display it in on UI right usually when you see any product dashboard any online portals or any shopping portals you will see list of products how they display so you can refer any online application and from there you can get an idea like if I show you quickly like myntra and there you can see how they are displaying the products so if you see here you can see it will also display the list of product like this because it will show you the images and basic detail of property product lots of other things I we are not going to build the exact layout right but similar kind of thing so this card we need so that I can display my product detail like this so to have the same look and feel you can write your own custom CSS or you can use any built-in Library as this session is more on Redux toolkit so I will not be focusing on CSS part it's totally up to you how you want to design your components but just to keep it simple I will use react bootstrap that will give me built-in components to for my designing so I don't need to write it from scratch so if you go to react bootstrap there you will find cards and see if if you open this website I need some this kind of card only right where I will have some image and then product detail product name and maybe a button at the bottom so that I can display add to cart right something like that so for this this jsx is already given so I will be using the same but for that I need react bootstrap first of all okay and to have some basic CSS classes I need to have bootstrap as well so let's install these two libraries and here I can say npm install react bootstrap and bootstrap so it will install react bootstrap package and bootstrap library for you and we just need to import and we just need to use it so these in packages are installed right let's confirm it in the package.json you should get it here we have bootstrap and we have react bootstrap okay now in the app.js JS file let's quickly import the bootstrap for basic CSS classes that might we will use right so we can import this one and in the product.js file but I want this card for every product we have to iterate through each items right and then we have to design the UI so for that we can use map method and we can create the card right so what we can do here let's create one variable cards that I I'm going to render at the end and here I will I trade on my product State because products will hold the complete data right that will return individual product here and here I'm gonna design my card so here I'll create one div and you can use flex model also but I'm just using this column medium three and within this let's paste my card that I have copied so now this cards we have to display instead of this product right so we can have it something like this let's create one row first of all here and within this I'm gonna have my cards so here let's use this cards so once you save the changes okay so here the card is not defined because card is a react bootstrap component so we have to import it from react bootstrap and I am also using button here so that also we have to import save the changes and let's see how it is displaying perfect right so it's displaying four column because this is a 12 column layout right so it will display four column in one row so we got the layout basic card like this let's have the data navigate just I have use the hard-coded data so let's replace with what we want to display it so as of now I want to display the image so for image instead of this one let's use my product dot image you can check from this one so we have this image right okay so image is coming like this although these all are of different size uh but that's fine we can fix that in a moment let's have a style here okay it's fine right but let's we can have it in a center so what we can do we can wrap it something like this so it will move my images in the center for title we have this title property right so here instead of card title I can say product dot title and it will display the title like this and next we have maybe I want to display price or description that you decide what you want to display here you can display that one so I can say here product dot description fine or you can simply say product dot price for now and at the bottom we need a button button is already there but we just want to have add to cart instead of this one add to cart you can have a key also here so that we can optimize the virtual Dom and let's have some height to this one fine so let's have a margin also here so I think it looks fine for now and this button also looks you know not positioned properly so what we can do for this we can wrap this button in the footer so that footer will always be at the bottom right so let's see if it get a line so it will come outside body we have one more tag here that is car dot footer and let's have your button here fine fine so it's now more aligned just like that it's background color looks little weird so what we can do we can have its background color also change just to keep it sink I have it as a white fine so I think we are good for now with this we just display a very basic detail about the product so this layout we have created just with the help of react only and with the help of use State and use effect hook and we just use a simple react bootstrap to have this card layout okay of course you can design it in a much beautiful way but I will not be focusing on CSS that's why I'm not worrying about much about the CSS path for now now the next step is let's have a basic routing so that we can display the product dashboard and so user can also switch to the cart page where they can see all the add to cart products right so very basic routing I want to have it for that we need routing package right that can help me to implement the routing so that is my react router Dom package is also upgraded now so there are little changes in that package how we use routes so let's Implement that I'm just installing react router Dom package that will give me the classes or methods that are used to implement the routing Okay so this is installed so now in the app.js file let's have a basic routing fine so how we are going to do that first to implement routing we have some classes that you have to import now in the new version of react router Dom we have create browser router class and we have create routes from elements and we have router provider after this what we have to do we just need to create a simple routes for that how we are going to we are going to create one variable router here and with the help of this create browser router function we are going to create our routes and for that we have this create routes from elements function that will basically gives you option to create the routes okay you can see here it will here you are going to mention all your routes and create a route is very simple you just need to use routes earlier we use routes here to create any sub Childs right but here you just need to use routes and that's it and further in this you can have your route so as of now I'll create only two route the one route is the index route that will basically show my dashboard or my product details right and the other one I'm gonna create is my cart page so for that let's create first two component I have one dashboard.js and I will have one card.js as of now it will not do anything I'll keep it very simple because first let's focus only on routing and then we'll Implement some functionality inside this as of now let's have a very basic heading so that we can differentiate that the correct component is loading or not right so here we can say X4 default dashboard and I'll just copy this one and paste it here just replace card here now move to app.js and I just want to have two route for my dashboard and for my card so what I can do here I can say this is my index route that will render my dashboard component because it will be my default route so we have to import this one and let's import cart as well and I will add one more route that will have a path of cart and it will launch the card component this syntax is same right now here of course we have to have other components also need to be rendered like my navigation my other components right so that how you will render because now in this you are going to do something like this let's remove the product for now and to render my routing you have to say this router provider and that will have a router property and you will initialize your routing like this now everything that you will put it should be inside this routing even my Redux toolkit provider will also should be inside my routing only but how I will wrap it inside because if I put some my logic here maybe I will create my navigation here so it will not be inside the routing right router should be root component for all the other components in this case so that my other things can work so for this in the new version of this react router Dom we basically use this root route here what you will do you will add a path here that will be basically my root path so here you just need to render one component that basically your layout component where you are going to do all these stuffs fine so what I'll do I'll create one component here only or you can keep it in a separate file and give it a name of maybe a root layout dot Js let's create this one so from here from your root route you just need to call your root layout component it will Auto Import here you just need to call this one now one thing is we have to import this route also right so let's import this one save the changes and let's check how it will look foreign navigation the reason being is when my app component will load my routing will rendered here right and as this is my root element this will call my root layout which is here and it has only navigation I didn't tell where exactly I need to render my respective components right so whatever component I am expecting to render as an index route ibly should call my dashboard component so ideally as soon as my this page will load dashboard component should render and when I change my route to cart card component should render but it's not rendering the reason being is in the root layout component you have to tell in the layout maybe you are creating sidebar header footer so you need to tell where exactly you want to render your routes so for that now we need to mention that with the help of one component that is called Outlet component so you just need to import Outlet component from react router Dom and here maybe in this layout I want to call my outlet component so whenever your route will change what whatever component you have mentioned against that route that route is going to render in this area so let's check this so here you can see this is my default route so dashboard company is rendering and when I say cart it will render my card component perfect but now I need this navigation need to be done through some links so that I can navigate easily right so let's have some Neva so for never also in the react bootstrap if you notice we have this nav bar and here you can see we have this complete Network and the same neighbor we are going to use so you can decide which kind of layout you need and you can use this one I need something like this because I need to have some button here and here I just need to have some brand and then I want to have one link right so I want to use this one but it has so many detail either you can write on your own or you can copy from here it should be up to you but I need one more component here let's first create that one and that is my navba so I'll say navbarpanel dot JS and here I can create a component and let's first position it I want to position it here in the instead of navigation I want to have my Napa okay so if you check here it will show me navigation and here so instead of navigation I want to build my navigation now so let's use this nav bar I will be needing these Imports let's have it and we'll remove whatever we don't need it and this nav bar I need fine copy this one and paste it here okay this is extra we can get rid of save the changes and just check it here so here you can see we are getting the exact nav bar right now let's improvise it and have only those links or those data which is required for us okay I just need this brand and one link and here instead of this search I may want to have a cart option to display the data in the card okay other than that I don't need any link for now so what you can do for that let's first change this brand here so instead of this one we can say Redux toolkit which is the project name okay and we can have one link for the product instead of home we can save products we can get rid of this one we don't need it link right we didn't we don't need this drop downs no we don't need it then we have nav link see the changes and see we have product we don't need this link also so we can get rid of this one we don't need even this form right we don't need it see but product route is not working right so let's fix that one if you want to make it work we don't need to have it as a href here what we can do we can have our two path and my path is this as a default route it's not working because here you just need to use Link route that come from the react router and now to make this link work you just need to say as and just mention this link so when you click on this one you can see it's working there are so many import we can get rid of it we don't need these right we don't need a button we don't need form and even we don't need this drop down right but yes I need to have one option to move to my cart also so for that what you can do after this one we can have a never dot toggle and here we can have a Nampa dot collapse and we don't need this one right we don't need it after this brand we just simply need to have this one okay so let's complete this one we are inside this right and let's have one lab r dot text and inside this we can have a link again like this and instead of this I can have a cart here or we can say my bag initially let's have its value as 0 and if you see this one it is here right I just want to move it to maybe right side so what we can do for that we can have it something like this justify content and here we go so when you click on this idle should go to the cart but same thing the way we have given this one here also you have to give the link that is already there but instead of this route you have to say cart route Let's test this one so when you click on this one you will move to the cart when you click on this one it will come to the dashboard so now my basic routing is done so let's call product component that we have built from this dashboard component so that I can see my products right so let's import product component and instead of this one let's have product component rendered like this save the changes and when you see this one so here you can see it will launch all my products and when I click on this one it will show my cart page when you go to the small screen and let's do this it is also collapsible foreign [Music] so now we are done with the basic things like the initial setup the layout part the routing part everything is done now we are going to discuss about the Redux toolkit part how we can Implement Redux toolkit to make it further more organized and to share our state globally so now let's see how we can use Redux toolkit here to maintain our state as of now the state here means this product detail right so we are fetching all the product in the product dashboard so we have the data there now when I click on add to cart right I want to display all the items that I have added to my card I can I should be able to display it here and how many items I have added in the card I want to update the total count here also so if you notice all these things are at different places this is in the product component the displaying this my total cart here that is in the never right and displaying the items in my cart it is in the card component so in this case I have to use the same data at different places so in this case there are different ways of achieving it either you can you can manually passing down the state to all the components so they are the problem you have to use ideally again it is not very complex project but when you talk about actual e-commerce website right there would be so many components and passing down the state to every component with the help of properly ideally is not a good practice so other ways you can use context apis and you can use use routers or who to do that but that also become very complex because my state are frequently updating here because I have to add the element to the card I have a delete the element from the card so it's so many update that will also not be that much efficient so in this scenario Redux is a better option because I can maintain my state at one place and then that one place is store right so from store I can pass down the state to all the company wherever it is needed so it is more organized and lots of things you will get here so let's see how Redux toolkit we can use I have already explained about Redux and Redux toolkit so you don't need to confuse with this right so Redux is basically a way through which you maintain Global state in the react components so to maintain Global State you can write your logic in Redux so to write the Redux logic instead of Redux package now we are using Redux toolkit package okay it's very similar like we are moving from class based components to functional components in a similar manner we are moving from Redux to Redux toolkit and it is giving lots of benefits that we have already discussed so to use this Redux toolkit package we need two things we need Redux toolkit earlier we use Redux here but now we'll use Redux toolkit and then to bind my Redux logic with my react I have to do react binding that we do with the help of react Redux so it remains same now here also we will we have introduced lots of hooks that will help you to do that binding right we'll see all those things in detail now so the first step is you have to install these two packages so let's do that first I will say npm install Redux toolkit so Redux toolkit is installed and in the same way I can also use react redx for my react binding so these two packages we need to install so it's also done yes this one okay so here the concept will remain same you will have one store and that store will hold your reducer where you will have all the state update and everything is going to done at one place then this state is going to be rendered on your UI and from UI you have to dispatch a action event so that action will basically help you to update your state in the store or in the Redux so in this flow you can see the data will flow from your store to your UI components and to pass anything to your store you have to dispatch action so the first thing we have to do now we have to create a store and we have to create a reducer so that those State we can pass to my UI right and to dispatch action we need action creators so now in Redux toolkit these things are simplified we still we have to create store and now instead of just creating a reducer we will create a slice so when you create a slice it will create a reducer and the respective action creator for you okay so it's much more simplified now so let's do that I will create one folder with the name of store and I am going to create a slice first of all so here in this case I will be having two slice the one slice where I will get the data for my API and the other slice is where I will hold the data in my cart or I will add delete like that so let's first create a slice that basically for my cart what I need that when I go to products right when I click on add to cart so all those items on which I say add to cart all those items I need to store in my card slice so for that let's create one slice and give it a name of card slice dot Js so let's see how to create a slice so to create a slice we have one create slice method from Redux toolkit now I'll create one card slice here with the help of this create slides that will take one object and in this object you have to pass all these things your reducer you are going to create here okay so I'll give it a name of name so it will have one name you can give it a card here and my initial state so initial State I have to Define I don't have anything in my cart right initially so it would be an empty array so here also you can create like this it's totally up to you now after this to create a reducer you have one reducers property here that will again take a object and here now you have to create your action Creator like what all things you want to do in this reducer I want to add my element through my card or maybe I want to delete the items for my card so first let's add one action and I'll say add so it will act like a normal method which will take state and your action and here you have to do your state update so whenever I pass some data from my UI I will read from this one action dot payload and that payload will give me the data that I want to update to my state so as I told you now the state you don't need to update with the immutable manner like the way we didn't Redux here you can update this state in a mutable manner you can mutate the state directly because behind the scene email.js library is used in the Redux toolkit that will make sure that your state will update as a immutable manner behind the scene so you don't you don't need to worry so I can simply say state DOT push and whatever data I get I can simply say like this so whatever data I will I will get I will update and I will add it to my state so it's a very simple reducer I have created now from here you have to export your reducer so I will say export default your card slice dot reducer is automatically give you one reducer property which basically return the reducer and the other thing is we have to return my actions because this these actions we are we have to dispatch from UI right because I have to tell whether you want to perform add operation delete operation or edit operation what so that that will act like my action Creator so that is the beauty of Redux toolkit you don't need to write too much of boilerplate code within this slice you can do your reducers you can write your action creators and it's in a very simplified way in future maybe we will be having a delete option also like this so you can keep on adding your actions Creator here like this and now let's export this function also so that we can call it for my component so here you have to say export const and here all your actions creators will be getting export like this from card slice dot actions so my slice will basically written two things actions these will be my functions here and reducer that will give me the state so this is how we are going to create a slice and when we when we have to do the same thing in Redux there we have to create so many folders and file for Redux because there we have to create actions reducers types in a separate logic and that is the reason lot of boilerplate code was there but with Redux toolkit we just need all in one and that is with the help of slice so slice is a collection of Redux reducer logic and actions for a single feature so when you want to create a slice with the help of create slice method you just need to mention your name of the slice your initial State and reducer and your actions so in the Redux toolkit create slice function will Auto generate the action type and action creator for you based on the name of the reducer function you provide and the another thing is in redox we have to learn how to update the state in an immutable manner right but this is not a case with Redux toolkit you just need to write the way we usually write but it looks like we are mutating the state directly but this is not the case behind the scene email libraries there which detect the changes to a draft State and produce a brand new immutable State based of those changes so you don't need to worry about writing the state in an immutable manner image.js will do behind the scene for you so write in the Redux logic and creating reactions and action creators are very clean and the simplified in Redux toolkit now the next step is we have created our state here now we have to create a store so store will actually bring your actions and reduce it together and hold the application stick so to create a store we just need to use configure store method of Redux toolkit so for that you just need to create one store in the store folder and here we have to create this tool so to create a store we need one function that is called configured store that will come from Redux toolkit and we just need to write computer store it will return one object and this object will have one property of reducer and here you need to mention your slice that you have created so far I have only one feature that is my card so I have only one slice that is my card slice so here you just need to mention your reducer so I will create one property of cart that will hold my card slice and at the end just make sure that you have export your store that's it so this way you will be able to create a store so Redux toolkit has introduced this configure store which basically do lots of configuration for you you don't need to do it manually like enabling the Redux tab tool extension Redux Dev tool extension is very powerful for Redux debugging right we will talk about this extension in a moment but in Redux we have to configure it manually but here you just you don't need to do that any configuration in the Redux for that you just need to install the extension and you are good to go second thing is thunk middleware is by default there for you in the configure store you don't need to configure the function middleware manually these configurations are already there when you use configure store in your project now we are done with Redux Logic the next step is we have created our store so now we have created our redox and we have created our components but these are not communicating with each other so ideally now we what we want we want to provide our state that we have created in the Redux to my component Pages or I want to update the state for my component to Redux with the help of some dispatching action so all these things will possible once my conflict know about the store so the next step is configuring the store to your root component so now react Redux binding will come in the picture so far we have used only the Redux toolkit package because we were configuring our Redux now if you remember in the beginning we have installed two packaged Redux toolkit and react Redux and I mentioned that react Redux package is used for the react we need that binding right so for that we have one provider that provider component will come from my react Redux package so this provider is basically a higher order component that wrap up the react application and makes it aware to the entire Redux State and it provides the store to its all the child content so now we want our react entire app to xsd store so just put that provider wherever you want to flow the states so now we want our entire react app to access this store so just put the provider in the root component so if you go to app.js file here you can see we have routing so here I cannot do provider because provider also should come within my routing so for that I told you you have to do everything here in this root layout so move to this root layout and now these are my component where I want to use my store so just wrap these component within the provider so first let's import the provider and this will come from my react Redux and of course I have to provide a stop so I need store as well so make sure that you have import the store and you just need to say provider and just wrap your all components within this provider so this provider have one pop-up store which will point to my store this is this one okay so this is the way through which you provide your Redux state to your components so now as we have done that integration so now my react components know about the Redux State and that we can check with the help of Redux devtool extension so for that move to your browser and go back and just check go to the developer tool and here just make sure that you have that I don't see Redux step tool extension because I don't have this extension as of now so let's install that go to more tool extensions and here open Chrome web store so here I will search for Redux Dev tools and from here you just need to add this one so let's close this developer tool once and open it again and you can see although it is showing me here so it's added right let's check it from here you will get a Redux option let's open this one so here once you go and check in this state you will notice like we have Cut State here that is empty so this card is something in this store if you go to the store and if you see here this card so it is displaying me this this state here and as this is pointing to card slice if you notice here I have initial State as empty so that's why initially it is empty so now all the actions that you are going to dispatch in either it is ADD action or delete action all those tracking you can do from here so this extension is very powerful if you want to debug your Redux State you want to know when it was changed what was the value how and for which action this state was changed so debugging is very very easy when you use this Redux depth extension we will use this extension throughout so let's keep it open and now let's move to the next point and that is I want to add my products because I when I click on this add to cart my this card State should hold that product detail fine so ideally what we need to do if you go to this card slice this add method is already there right I have already created action this function we have to call from my react component and I have to bind it to my add to cart button so that whatever product I will add it should add to my state but the point is how to dispatch action from my component see now there are two things that you have to remember with Redux State idly we are going to do two things either we will read the state for my Redux into my react company or I may want to update my Redux State basis down some action that I'm going to take for my component like suppose I want to read how many items I have added in my bag it means I am reading the state for my latest now from component I am clicking on a pad to card and this product I want to add to my deduct state so this is a dispatching action so for these two things in the Redux Dev tool it is very clean now earlier it was really a headache to dispatch reaction to Redux because we have to mention the type we have to manually pass the action for the payload but now it is much cleaner with the help of Hook so react Redux will give you two hook use dispatch hook and use selector hook use dispatch hook it will use to dispatch action and use selector Hook is going to use to read the state so first we have to dispatch action so that I can add that particular item to my cart so let's use use dispatch hook to do so so add to cart button we have in the product component right so let's move to that component and here you can see we have add two cards now we just need to have a on click event here and this will call one function add to curve and whatever product we are currently looping in that I have here right this product I want to add to my cart so this is just some simple function so this this we have to create here that will give me Product detail and from here we have to dispatch action and which action add action so it means I need two thing I need a dispatch function first of all because in Redux we cannot directly call Action of my Redux for that we have to dispatch action so to do so we have use dispatch hook from react Redux and we have to make sure that we have imported our add action also because that this method we are going to call now that will come from my slice so it is in the store card slice so this use dispatch Hook is going to return our dispatch method so we just need to get it from here like this so now with the help of this dispatch method you need to tell which method you want to dispatch I want to dispatch a add function and this payload if you see it will show me the Redux logic so in the Redux we usually do something like this whenever you dispatch any action you have to write payload you have to write type to match in the switch cases of your Redux and basis of that it is going to update this state but now this is not the case it's very clean you just need to mention your action and pass your payload my payload is this current product and that's it this is how you have to dispatch action save the changes and let's test this one initially my cart is empty because nothing is there and I haven't dispatched anything that's why there is no action as well so suppose I'm clicking on the set to card just make sure you will notice one item will get added here and it will also show you uh this item will add basis on which action so I click on this add to cart you will see one action has dispatched for my card slice and in the card slice add method was called see how helpful it is right and if you see my state also it is also updated with one item here and that is my this item see if you click on any other item another action will dispatch and another item will get added so Redux depth exchange will give you a clear picture about when the state was changed and which action was dispatched for that state everything even if you see here as of now we have two right you can go back and see how the state was changed from 0 to 1 to 2 and you can see when which action was dispatched so it's very helpful to track if something is not working you can replay the state up to which it was working when it was not working very helpful tool so now we learn how to dispatch reaction now let's come to the next Point how to read the state from Redux because my state my Redux has two items in this state right in the cart I want to get these detail now in my cart page but first let's see how to update this bag because idly I have two items in the card so it should show two instead of zero so it is same we have to read the state from a Redux and then we can get the number of items so my bag is in the never panel component right here we have and so instead of this zero hard coded value I want to get the actual number of count so for that we just need to read this state from my Redux get the card State and then I have to count how many items are there in the cart so for that also we have to use a hook that is called use selector hook you selector Hook is basically used to get the state for my Redux so let's do that for that you have to say use selector hook it is also for binding so it will come from react Redux package and this is going to return state so maybe here I can say card products and here you have to use you selector hook that will return me a state because I can have multiple slices so from which slice I need to have that from my card slice and please make sure that whatever you have mentioned here because in future I can have another slice also here so you need to mention from which slice you want to get this data I want to get this state for this slice that is referring by this object here this key here right so you just need to mention the correct key name so now move back to your component so card product will return all the products that I have currently in my cart slice so let's get the length out of it with the help of length property save the changes and back to your browser you can see it automatically updated because I have two items in my cart if you add one more item you can see it will update so now we have learned how to dispatch action and how to read the state and if you understood these two things that's how your computer drugs is going to work because most of the time either we have to read the state or we have to dispatching action and the point we have to do is when I click on that my bag I want to display these four items here okay so for that simple Logic the logic will remain same in the card component I need to get the state and then we have to use like in the neighbor I get the length from my cart but in in the card component I will display that product so logic will remain same you just need to go to card here also you have to use the same pattern you have to use you selector hook because that will give me the state from react Redux and just read the state from it and here I can say use selector that will return me state from my cart just make sure you got the correct data you can have it quickly like this just to make sure C so it will display all the four item and now we just need to use simple jsx and want to display it I will not write again a very fancy code for that I will reuse my code that I have in the product component so if you want to use as it is you can keep this one also in a separate component then you can use it I might modify it little bit so I'll copy it from here for now and I will paste it here as it is and let's change your state also with products and let's display it so I will display my cards here instead of three column let's have 12 I may want one only one item in one row let's first check okay so it's saying card is not defined of course we haven't imported these component from react bootstrip so make sure that you have imported it so I am using card from ah the egg bootstrap and I am using button also although we are not using add to cart but I will use button so first let me import this and later we'll see for which action I'm gonna use it so we have react bootstrap and button as of now we don't have this add to card also so let's remove this one save the changes and let's check this one okay just spelling is also not correct here so let's save and check this one so let me add maybe two three items so I have three items in the card when I click on this one it will show me like this now instead of add to card of course we have to have maybe remove item okay and instead of blue let's have something in red so now let's add a logic to remove the item it will also same idly I have to dispatch a action when I click on this button that action will I have to create in my slice as of now I have only one method in this slice that is my ad so let's move to the card slice and here let's add one more action that is for remove so you just need to keep on adding your action here so now from here I need to return a state that will not hold that deleted item okay so I will use filter method because I need to filter the item based on my ID so here I will say whatever ID I have if it is not equal to what I will pass from my UI then return that array only so this way I'm gonna delete the item from my cart so now the next step make sure that you have export this method also from here so that we can call this from my remove to cart button so let's move to the cart and from here I have to remove the item so for that let's add a event on click and I will create one method remove to cart and I need to pass the ID so ID or I already have for this one so this is a unique ID for every product so this ID I'm gonna use to remove the item from the cart now this function we have to create here so let's have it remove to cart that will give me the ID and from here we have to dispatch it remove action so what we need to do for that we have to use use dispatch as we have discussed right and I need to import my remove action for my slice so let's import that one as well and and now you need to get that dispatch method from this use dispatch hook so just you have to call dispatch and your remove function and pass this ID and you are good to go let's check this one so let me add few items so three items are there in my cart and you can see that as of now I have only added the item that's why only add actions are there let me remove one item so you will see now for remove our remove action was dispatch and if you check your current state it has only two item because one item I have removed and the same state has been updated here also so now we are also able to remove the items from the cart so that's how you can add the items you can move the item and you can perform lots of other operation in a similar manner so now we are left with only one part and that is our product dashboard because this data fetching we are doing in the component in the product component ideally this API call will also we we have to do from my Redux so let's see how we can do that if you open your product component there if you notice we have called API here in the use effect hook so let's see how we can make API call with the help of Redux toolkit when we talk about Redux Redux is basically used to handle the synchronous behavior that Redux don't know how to deal with the Earth synchronous logic but if you want to handle any Earth synchronous operation in Redux there we use middleware and Redux thunk is one of the most popular middleware that is used to perform our synchronous operation and a middleware is designed to enable the developer to write logic that has side effect which refer to any external interaction outside and existing client application like fetching the data from the back end so with Redux toolkit Redux thunk is included by default okay you don't need to include anything manually it is already there for you so let's see how to make a API call with the help of middleware now first we need to understand can we use the same slides here for that this one can I have one more action Creator here and I can add my API call ideally not right as I told you you create slides per feature so if you create a method here for facting the data it will mutate the state right so in that case you will not hold your original data that you had from the API so for API call we have to create a separate slice and we have to handle it separately so let's create one slice for that product slice dot JS and I'll copy the same code here for now and just change the name here product slice and here I can see products let's remove these methods as of now and let's import this one now the next point is the initial State now the initial state would not be empty we are making an API call so API calls basically always not written data it also written errors or other status right so to handle all the expect of API let's make it an object and hold the result in data that is empty as of now okay so this is my initial state for my uh products life we have to make the API call so to do the API call you will not write the logic here okay because slice don't know how to handle the asynchronous operation so we have to create a thunk action Creator here so what we'll do we will create one function here give it a name maybe get products and it is going to return up promise right so here we can say get products done so I'm creating one thumb Creator you can say here that will have dispatch and your state and now whatever API call you are doing in the product component let's get it from here I'll copy it as of now and you need to put this code here okay so here we can say a weight and let's hold the result into Data and let's put it in a variable and in at the end we got this data right so this data we have to pass to my action creator that I will create in the reducer right so suppose I have one method here that is fetch products this is same right that we did earlier for state and remove in the cart so here my this thunk Creator will dispatch a action for this function so from here I will simply say dispatch and fetch products and pass this result so far what we have done we have export this function from here then we dispatch action for my component for this one right but now instead of calling this one from the component my thumb action Creator will call this one and from UI I'm gonna call this function so let's update this date now in this state I have data right so I will update my data with the data that I'll get from my API that is action.payload so this is done now to make it work I have to configure it with the store so move to the store the way we have cut slice similarly you have to import your product slice so here what we can do we can say fetch what is the name let me check again product slides right so here we can see product slice so here we can say products and here we can say product slice save the changes as of now nothing should break because my components will have API call but here if I refresh it one time if you see here now I have two slice the cart and the product and if you expand it initially I have only data that is empty right because I haven't configured I haven't called my thumb Creator from my component so it is empty as of now so let's do the next step I hope so far it is clear we have created a separate slice now for the product and we have created a thunk creative and that is just returning me the data from the API and this data I am passing to my reducer Creator so now for my component instead of calling this function I will be calling this thumb creator that is get products so for that move to your product.js file from where we were calling the API now instead of doing this I will get it from this code now what we have to do we have to dispatching action for fetch products so now I just need a dispatch method and I need the tongue creator that I have exported from here get product so let's first import this one so here I can say import and next we need to import use dispatch so use dispatch is already there so we can directly use that right because we have already used for add to card so it is already there so now here I'm gonna dispatch action and that is get products so we have displaced the action and now the product that my API will fetch I need to read that product as well right so now we don't need this state because my products will come from my product slice so we can remove this one and now I need products right which I am using here so this product will come from my product State and if you go to the browser you will notice it is saying that product is not defined because we don't have this product anywhere in the code so as I told you to read the state we have to use use selector hook right so the same thing we have to do you select a hook and this is going to give us a data because it will written a complete object remember I had State as a initial State here in the product slice as an object and I need data out of it right so what we need to do now we just need to get the data with the help of use selector hook and here it will return the state as my store has to reducer or two slice right so I need to get the data for this product state so here you need to mention state DOT products so now this data will hold the product list but here I am using products so you can use Ilias and you can change it to products here save the changes and let's test whether it will work okay so we are getting error like read property of undefined so okay so here if you see I have used get products right but get product is a default input I have done ID is a named import so we have to do something like this save the changes and let's test once more fine so it's working so now we are still getting the data right but let's check whether my state in the Redux is updated or not so we have one product state right and if you notice here it trigger the fetch products action right and this fetch products is is this one so with the help of my thunk I have executed my this action which will update my state with the products and if you check my products it will return me a data which has list of data here that I am able to display and last again my card slice anyways is working right you can see so there is no impact on that and here you can see it it dispatch products and here it displays Now card action so both slides are working fine now this thunk action Creator I have told you as a gen dig the very same way we did in the Redux as well but now in the Redux toolkit we have more better way of handing it because when we talk about API right API not only written the data it also written the state of your API so if you have worked with promises you know like promise has three state like fulfilled pending and rejected right so now to handle the same kind of structure of promises or to handle this different state Redux toolkit offer a better way of handling a synchronous operation with the help of create async thumb so now let's improvise this code with the help of create async thumb there will be no change in the component but we have to modify the slice so now in Redux toolkit we have reducers to handle the synchronous task if we have something asynchronous then we have one more option here that is called extra reducers okay so this extra reducer has Builder and it will be a object so now we don't need to write anything here in the reducers let's comment this one now in the extra reducer we have to add the cases cases means like like promises have three state right so all those three states now we can handle in the extra reducer really handy because in API call we have to handle all the state on the screen what to display when error will be there what to say when a screen is loading right so States we have to handle so I will come to this in a moment but first let's use create async tunk middleware okay so for that you just need to import it create async Tunk and now here what you need to do let keep it as of now I will show you here so we'll create one function here export cons let's keep the same name get products and here you need to use create acing tongue which will take first parameter as the action type so we can say here products or get and here its second argument will be a callback function so it's a async callback function we have to write something like this okay and now whatever logic you have written here let's copy this one and put it here let's comment this one so this will remain same you will have a API call and you will get the Json data now you don't need to dispatch any action because we don't have anything in the reducer so you will not dispatch is anything just you have to return the data so now in this extra reducer we have to read the data we have to do our State update logic so what we have to do for that we just have to say Builder and add case so we can do something like this add case and here on this get products we have to say get products here it will return States you can see here we have fulfilled rejected pending right so as of now let's talk the success scenario so suppose my promise is resolved so once my promise is resolved how you want to update the state that you can do here you don't need to handle it manually or explicitly because it is now in the form of extra reducer here you can do the same thing so now how you want to update this statement my promise is resolved so the same thing that I did here now I have to do it here save the changes and let's test so you can see I'm getting still the same data right I have and here you can see so it automatically create an action you can say I have created products dot get action here right but automatically it check this date whether it is a pending State fulfilled state or rejected state right so for pending I haven't handled it but it's triggered right so if you want to handle something during this stage I want to show the loader or something then you can work on the pending action so here you can create the pending State and you can do that okay so it's really useful because the syntax is very closer to promise so it's very easy to understand as well so now let's handle the error code of the promises right as I told you we have different states so let's see how we can handle that so to handle the status I need to have one more State here and this will be any state initially I will be have idle nothing right because when I will not hit any API ideally it will be in the idle state so I can do something like this fine now on basis of this instead of State we have to say status okay so now let's handle the other state as well the way we have fulfilled what you can do you can add one more case and the same thing here you can say get products Dot pending and how you want to handle the pending action here of course I will not do any state update because it's a time it's a time when my API call is in progress you can see so here you usually uh display loading option right so what I'll do in that case I will update my status value to loading and now the next thing is the last is the rejected or error state so if my status is error in that case you can display some error message like something went wrong or something like that okay so here you can return something went wrong try again later four trigger this one I have to do some mistake right so let's change this URL to something that is not valid save the changes so when you refresh will show loading and after that it get into the rejected state so for rejected action you can see my status is also error so for that I have this error this one in the product you can display your alert also here if I import alert you can say import alert from react bootstrap you can display some error message you know good formatting something like this and let's have its key as Danger and we have to apply variant also okay let's have a variant also here hmm now test it again so you can see something went wrong please try again later so this is my error scenario so now let's fix it and undo my this URL let's make it correct so now it should load ending in fulfill State and you get the data and everything is working fine right so this is how you can handle the asynchronous operation in Redux toolkit with the help of create async Tunk and you can see here uh in the store I haven't configured anything for the middleware Because by default thunk middleware comes by default with the configuration of Redux toolkit so you don't need to do any kind of configuration to use that you just need to use directly so just one Improvement you can do here you can see here this status I am using a lot I am using it here also and wherever I am using it in the component there also I'm using it and there's a huge possibility like by mistake if I do some typo here right so if it will never match with the status and it will not work see no loading so instead of putting it as a string we should use some constant here instead or some enums so that the chances of errors are minimum over there right edoms we don't have here directly but we can get a object and we can get a similar kind of structure there so let's quickly fix that so that we will not have any chance of error right so what you can do you can create one utils folder here and here you can create a file with the name of status code.js okay and here let's create that status code and here let's create your enum kind of structure with the help of object so I'll put key and value so loading so here it will act like my constant and its corresponding value so I have loading status I have idle status and at the end I have error status so it is a one time configuration there would be no chance of any error in this case because I'm gonna use the key instead of value so it would always pick like this so now let's import first let's use it in the product.js so let's import the the status code here and let's see this one so instead of putting it as a string you can say here status code Dot see you get all these things so there is no chance of any error so if it's a loading then display this one and same thing we will do 4 error so you can see nothing will break right it's fine and quickly we can do the same change here in the slice as well so let's import and initially its idle so here you can say status code Dot idle and status code Dot loading status code idle [Music] and Status Quo error you can see it's very clean right so just make a practice of using it like this you will get it from lot of issue that might come in future because as of now I'm using this in only two file but when project grow I have to use this status in multiple places and now as I have put the status in a separate file so for all asynchronous call the status will remain same these three states we have to handle so we can reuse this file anywhere so it will remain same save the changes and quickly test is everything working fine so initially you can see I have empty card and in the product I have list of products that's why I'm able to see it on the screen and the status is ideal loading was there but it was now done and once you click on add to cart it will add the product into the cart so my card state will also update so three products I have added and respective action created are dispatched and my bag is also updated when you click on this one it will display all the items that I have added in the cart you can remove any item from the cart as well so it will update this data as well so this is all about the fundamentals of Redux toolkit which is important and mandatory to learn if you are using Redux toolkit once you understood it it's easy to implement in any project and doesn't matter how complex project you have so I hope you found this session useful if yes then let me know in the comment section if you have also practiced it along with me and how much you understood about Redux toolkit this is all for today thank you so much for watching

Channel: Nisha Singla

Views: 14,154

Keywords: redux, reduxtoolkit, react-redux, react tutorial for beginners, react tutorial, state management in react, routing in react, react projects for beginners, react projects, react project ideas, nisha singla, react redux toolkit, reactreduxtoolkit, reactreduxtoolkittutorial, #reactreduxtoolkitecommerceproject, #reactreduxtoolkitproject

Id: A_vRvDAZuOo

Length: 87min 45sec (5265 seconds)

Published: Fri Apr 28 2023