React Redux-Toolkit Shopping Cart App | Redux-Persist with Redux-Toolkit

hey guys what's up what's going on welcome to my youtube channel in today's video we are going to see how we can implement the shopping cart functionality with the help of reader toolkit so this is our shopping cart and we are going to perform all kind of shopping cart operation with redux toolkit so if you increase the quantity so you can see that the total is getting updated over here and the quantity in our cart is also getting updated so everywhere is updated whenever you update the quantity and if you decrease the quantity so this is also working you can see that our cart quantity is getting updated and this amount is also getting updated you can also remove the product from the shopping cart so if you click on this icon this item will get removed from our shopping cart and the total amount will get updated and the quantity will also get updated and you can also remove the item from this card if you click on this again because we have only one quantity and if you click again on this down arrow so this way also it's going to remove from this cart okay and you can also clear the card as well by clicking on this button okay so you can see that now our shopping cart is empty and if you wanted to get all the item again then you have to just click on this button okay and again you can perform the same operation like increasing the quantity or decreasing the quantity and this all value will get updated so we are going to write a different different redux action with the help of reader toolkit and we are also going to purchase the entire shopping cart so if you refresh this application so you can see that our shopping cart is persisted over here so for persisting we are using redux purchase so you are also going to learn how to use redux purchased with reader toolkit in this react application and the source code of this project i will provide in the description so you can always check out the description for the project github link so this is the overall application that we are going to build in today's video so without wasting any time let's start working on this application so i will go into my directory and i will create a react project so let's start building this application so guys i am going to create a project here so i am in this directory so i'm going to open a terminal and let's create a project npx create react app and my project name will be shopping card okay so this will be my project name and let's wait for the project creation it will take around two to three minutes to complete this process so i'll be back once this process get completed so guys our project setup is now completed so first let's go into this folder that is shopping cart and we need to install some packages before we start working on this application so we are going to use mdb react ui kit to work on our component we need to install redux toolkit we also need react redux we need redux as well and we also need redux per test because we are going to persist our cart item so let's wait for the package installation and i'll be back once all the package get installed so guys our package got installed so let's do first npm start and i have already opened this project in my visual studio code so let's go into the vs code so you can see that i have opened the project in my vs code so we have installed these packages redux toolkit react redux redux redux purchased and mdb react ui kit and our application is loading into the browser and our project got successfully loaded into the browser now let's go to the vs code first and let's do some cleanup first so we don't need this one okay and let's give for now shopping cart okay we don't need this logo so let's remove this one let's delete this file let's go to index.js and here it's fine and let's create some file and folder so we are going to have one redux folder and we are going to have some file here so we are going to have navbar.js we are going to have a navbar one card container and we are going to have part item okay and inside redux we are going to have store store.js and we are going to have one folder feature okay and inside feature we are going to have our slice so we are dealing with the card so it will be slice cardslice.js okay and let's go to the app.js file and let's verify whether this changes is getting reflected or not so it is reflected since we are using here material design bootstrap so we need to bring a css file for our material design bootstrap so i'm going to paste the css import statement for material design bootstrap so this one we need to paste over here now if you go to the browser you can see that it's got change so that means we are successfully able to configure material design booster in our application okay now first i am going to configure the reader toolkit in this application then we are going to start working on this component that is navbar cart item and cart container so i am going to start configuring the redux toolkit in this application so let's go to the card slash dot gis file and we need to bring create slice from our redux toolkit so create slice we need and after that we have to define our slice the cost card create slice okay we have to define the slice name so it will be cart okay and then we have to define the initial state of our application so i'm going to have items so basically it will have all the product item so i'm going to paste one data file here under the source folder so this data file we need here under this source okay so it contained four product with title price image and amount so initially i am setting the quantity is one so this is the quantity okay now let's go to the card slice.js file and we have to bring the data file here so import data and we can assign this one okay so initially we are going to show the four product on our page after that we are going to have total amount okay it will be 0 initially and total count this will be also 0 and we are going to have reducer inside which we are going to write our action so initially it will be empty so let's export this uh slice export default card slice dot reducer okay now let's go to this store.js file and here we have to bring configure store from our redux toolkit so from redux toolkit we need to bring configure store now we have to also bring our cart reducer from this feature folder card slice after that we have to basically export our store so cost store configure store and we are going to have reducer so we are going to basically access the state that we have defined inside this card slash.js file with the key card so we are going to assign this card reducer to the card key so our store configuration is completed now we have to just export this store so export default store and the last step we have to do some configuration inside our index.js file so from react redux we need to bring provider first so let's bring provider in order to connect our react application with redux and we can just put this app component inside this provider and we have to also bring the store so let's go to this redux folder and we can provide this store to our provider let's save this file and let's verify whether our redux toolkit is successfully configured or not so let's go into the browser since we got no error so that means reader toolkit is successfully configured you can also verify with the redux dev tool if you have installed this dev tool in your chrome extension so if you open this one so now you can see that we have our initial state so you can see that we have four product inside this items okay so that means we have successfully configured our redux toolkit in this react application so redux toolkit configuration part is completed over here now we are going to start working on one by one component so first we will start working on our navbar.js file so now i am going to start on this navbar component so first let's generate a snippet over here okay and in app.js we are going to have our navbar component and card container okay so let's work on this one and we can bring our number component here only so let's save this file first and we can bring this nav bar so vs code automatically import this component you can verify this one so you can see that it is working now let's go to this number component and here we have to bring some component from our material design bootstrap so from mdb react ui kit we need to bring mdv navbar mdb container mdb icon mdb navbar link mdb navbar brand mdb badge okay so this all component we need after that what we have to do so we have to also bring use selector and use dispatch from our react redux so let's bring those thing first and we have already defined the initial state inside this card slice so we can read this state okay inside our network.js file so inside navbar we have a cart bag on the top right okay so there we have to show the total count okay so we can read the state value with the help of use selector and and we have stored the reducer with the key card okay so we can access the state like state dot cart and we can restructure the total count as of now it will be zero only so let's work on this navbar component so i'm going to use fragment here and i'm going to use here mdb number and here it will be expand lg dark bg color i am going to give your primary okay inside this mdb number i am going to have mdb container and then we are going to have mdb navbar brand okay and here we can give like redux toolkit shopping cart okay and inside we have to pass some styling so i'm going to give styling like align item it will be center let's give display let's give display flags and justify content will be space between let's save this file and we can verify these changes so you can see that we are getting this one our nice nav bar now after that we are going to have mdb nabar link and then i am going to use here a tag with the class name mx iphone 3 so basically i am using your bootstrap class name and here we can have mdb icon and i am going to use font awesome icon so i need to put one style sheet to enable the fund awesome so this style script is required to enable the pantosa and inside this mdb icon we are going to have mdb badge okay first let's pass some props inside this mdb icon so we are using font awesome icon and icon we are going to use your shopping cart okay size will be large and color i'm going to use here white so now inside this mdb we have to provide this crop okay color will be the danger that means red notification sorry it will be notification and we have to give some inline styling and i'm going to give font size 12 pixel and here we are basically showing the total count okay and we can verify this one whether it's working or not so let's go into the browser so now you can see that it's working we are able to read this zero value from our store and currently we don't have any item in the card so it's showing zero so our navbar is completed over here and i think this huge dispatch is not required so let's remove this one so navbar part is completed over here now we are going to work on our card container so now i'm going to start working on this card container component so let's generate some snippet over here so first we need to bring use effect okay and again we need here use dispatch and use selector from our react products so use selector use dispatch and we need to bring some component from our material design bootstrap so the component we need here mdb btn mdb icon okay so only this two component is required to import from our material design bootstrap and here what we have to do so first we need to extract some state that we have in our that we have in our card slash dot js file so let's use your use selector and we can access the state with state dot card so we need here items and total amount okay now what we have to do so let's remove this one i'm going to use fragment and if you have the items then i'm going to show that so now what i'm going to do so first i'm going so now i'm going to use your h2 tag with the class name lead hyphen mb hyphen zero dot empty hyphen two and i'm going to give your heading like your shopping card now we have four products inside this item so i'm going to use this component inside this card container so for now i'm just going to generate some snippet here i will work later okay and here we have the item so items dot map item and we can return here our cart item okay so vs code automatically import this component and key i'm going to pass here item dot id and i'm going to spread out the item so this basically data.js contain title price image amount okay so let's save this file and let's go into the browser refresh this one so this component is not showing so we have to basically go to our wrap.js file and we have to bring that card container component let's save this file now let's go to the browser so now you can see that this cart item component is rendering over here so we have four item in the data.js file so it's rendering four time okay after that we have to work on this card item.js file so now i'm going to start working on this cart item component so here we have to bring use effect okay and again we need to bring this two things so this two thing we need to bring i will use here as well so first let's bring here okay and now let's remove this one and i'm going to use your inline styling so width i'm going to use here 70 view width okay max width i am going to use here 90 ram it will be inside double quote margin i am going to give here 0 pixel and auto now inside this div i am going to have one more div with the class name bro and again i'm going to have and again i'm going to have some inline styling so margin top so it will be 10 pixel okay let's format this one and inside this cindy i'm going to have one more div with the class name call hyphen sm iphone 2 okay and this component is going to receive props because we are spreading all the item like this way so it's going to receive props here like id image title price and amount so i'm going to use your image tag inside source i can provide this image and in alternate i can provide your title i am going to use here class name image fluid and style i'm going to use here object fit cover let's format this one and i'm going to have width 5 ram and height i'm going to have my frame only okay now after this tip i'm going to have one more div with the column hyphen sm hyphen 2 and i'm going to provide the margin as a props and here i am going to have h5 tag inside this i am going to have title so let's verify this one for now whether it's working or not so let's go into the browser so now you can see that we are able to display the power item along with the image and title now after this h5 tag i am going to have one more h5 tag and this will be the price okay and here i am going to give some color so color i'm going to use here has 61 70 98 okay let's see how it's look like so our price is displaying over here now i'm going to have icon here omdp icon and i'm going to use here front awesome and this will be the trash icon okay style i'm going to give here cursor pointer and color i'm just going to give you a red and this mdb icon will be the self close okay now after this tip i'm going to have one more div with the class name call iphone sm iphone 8 and again i'm going to use your mdb icon only so it will be like arrow up okay so i'm going to use here chevron chevron up and we can remove this color okay it's not required here and then i'm going to show the amount here so for that i'm going to use peter and inside it i'm going to show the amount and i'm going to give some inline styling so margin top it will be 10 pixel and after this we are going to have arrow down as well to basically decrease the item quantity and this will basically increase the item quantity so this will be down seven down and i think that's it for now we can verify this one whether it's working or not so let's go into the browser so it is working you can see that we have got arrow up and arrow down for increasing or decreasing the item quantity so now here we have to show the total amount as well we have to continue working on this cart container.js file so after this i am going to have footer okay and we are going to have one horizontal line and then h4 tag so i'm going to provide some line styling so it will be like display plugs justify content space evenly and margin right will be 60 pixel okay and here i'm going to have total total span tag and we can show here total amount and this will be inside and div okay so let's put this one inside a div after this div we are going to have mdb btn now inside this mdb video i'm going to pass some props so color it will be danger on click we are going to have so we will define the on click later so for now let's remove this one and we are going to have a style so it will be width 140 pixel okay and we are going to have margin top so it will be 50 pixel so the button value will be the clear card so you can also remove all the item from the card so let's save this file and let's go into the browser so now you can see that it is working and as of now the amount is 0 this one is also 0 because we haven't defined any action to update all this value okay so now we will start working on our each reader section for like increasing the quantity or decreasing the quantity or removing the item from cart or if you wanted to remove all the items from cart then you can also do that one by clicking on this button so we have to define the action for each operation so first i am going to write a action to get the card total okay so we have some amount for each product so i wanted to show the total of this card okay so let's start working on our redux toolkit action so now i'm going to write a reader toolkit action to get the total card item value okay so inside this reducer i am going to have that redux action so we are going to have a action like get card total okay it's gonna having a state only and here i'm going to define one variable and state dot items so i'm going to d structure total amount and total count and i'm going to use your reduce method so reduce method basically run some kind of operation across all array element and it will produce a single value based on that array so here i am going to have cart total and card item okay and then from cart item i am going to have this price and amount okay then const item total price into amount so i am just applying here simple math here to calculate the value of total lighter and then cut total dot total amount is equal to so it will be plus is equal to item total and same thing i am going to do for total count as well so card total dot total count and amount okay amount here is nothing but quantity okay then we can return card total okay now we have to also provide the initial value so total amount so it will be zero and total count it will be zero let's format this one and after that we have to update our total amount and total count the state.total amount is equal to so i am going to apply a parts integer and total amount dot 2 fix so i'm just going to fix the total amount value up to 2 decimal place and state dot total count is equal to total count okay so this is completed now we have to export this action so export call and it will be like card slice dot action get card total now we can use this section here in cart container.js file so we have to use inside our use effect and we have to first store the reference of use dispatch into a dispatch variable then only we can able to dispatch that accent so dispatch get card total so vs code automatically suggested me this redux action so it will automatically import if it's not import automatically for you then you have to import it manually so let's go into the browser so now you can see that we are able to see the total amount of this product which is correct so total quantity of our product in shopping cart is four you can see that here because initially our cart item quantity is one okay so this is completed okay now the next action we have to define for increasing the card item so if you click on this arrow so it will get increase and the price will also get updated along with this cart value as well so first let's define the action to increase the item quantity so so i'm going to define action here to increase the cart item quantity so here i'm going to have increase and i'm going to have state along with action and then i am going to have state dot items dot items dot map i am going to have item and we have to check if item dot id is matched with the action dot payload so in action dot payload nothing but it will be the id so action dot payload will contain the id that we are going to send from our component so if it's match then only we have to increase the quantity okay so in that case what we have to do so return i'm just going to spread out the item and we have to just update the amount so item dot amount plus 1 and we can return the item so this is computed now we have to display this action so first export this one and we can use this one inside our cart item.js file so again we have to store the reference of use dispatch into a dispatch variable then only we will be able to dispatch an action so this is several enough that means we can increase the item quantity on click we have to provide here and i'm going to dispel that increase action so vs code automatically suggesting me this action and i'm going to pass the id that i am receiving here as a props from our card container component let's save this file and let's go to the browser refresh this one now if you increase this one so you can see that this is increasing but our card total and this card quantity is not getting updated so what we have to do so we have to basically do some changes in our use effect so this action will always get dispatched whenever we have changes in the quantity okay so we can pass the items in the dependency so whenever any changes happen in the items array so this will basically get fired okay and we will get the updated total item value along with the total quantity so let's go into the browser and refresh this one now let's increase the quantity so you can see that it is updating and here also it's got updated to 5 so you can see that it's updating now the next thing uh we are going to basically implement the functionality like to remove the product from the shopping cart now the next redux action we are going to write to remove the product from our shopping cart so we can write here actually so we are going to have remove and we are going to have a state along with action and state dot items and state dot items dot filter we are going to have here item and we have to write your basic logic like if item dot id is not match with the id that we are receiving from component then we have to keep all those item and remove that particular item from our shopping cart so this will basically filter out that item from our shopping cart and let's export this one now we can use this action inside our cart item.js file so here we are going to have on click and we can just dispatch that one remove so vsport automatically suggest with this section and we can pass the id let's go into the browser refresh this one and if you click on this delete icon so it will get deleted the card value is getting updated and this shopping cart quantity is also getting updated so this is working you can see that so now the next thing we are going to basically work on our decreased quantity so this functionality we have to work so if you click on this arrow down so the quantity will get decrease and if you have only one quantity and if you click again on this arrow down then it will get deleted from our shopping cart so we have to also take care this thing okay now i'm going to write a redux action for decreasing the quantity so i'm just going to copy this one okay it will be almost identical we have to adjust few thing so it will be decreased and this time we wanted to decrease the quantity if the id is match and we also wanted to do one more thing like if you have only one quantity and if you just click again on this arrow down then it will get removed from our shopping cart so here we can do like filter okay filter and we can check here like if item dot amount is not equal to zero that means if it becomes zero then it will get removed from our shopping cart so let's remove this one type of error was there let's export this one and let's use this action inside this cart item.js file so here we can use on click so it will be decrease so we could again automatically suggest with that action and i'm going to pass the id and we have to basically pass inside the dispatch okay so i'm just going to cut this one and i'm going to put inside this patch then only it will work so let's go into the browser refresh this one let's increase this one let's decrease this one click on this one so it's getting updated this will also this is also getting updated and if you click again then this item will get removed from our shopping cart so this is also working and this way also you can remove item from shopping cart so both were working so this is done now we have to work on this clear card so if you click on this clear card then all item will get removed so now i'm going to write a reader section for empty the card okay so it can have like clear card okay and it's gonna having state and state dot items equal to equal to empty array okay let's export this action so clear card and we have this button inside our cart container okay so here we can have one on click method and we can display that action clear card okay so vs code again automatically suggested me this redux action let's save this file and let's go into the browser and verify this one refresh this one click on this clear card so now our cart is empty and if the card is empty then then i don't want it to show this thing okay so i wanted to say a message like your shopping cart is empty so here we can check like if items dot length is equal to zero that means we have a zero item in the card in that case i wanted to return like your shopping cart is empty i am going to use h3 tag with the class name fs hyphen bold and i'm going to have some more class name here so margin top four okay and we can give you like your shopping and i'm going to use your icon i'm going to use your expand tag and i'm going to have mdb icon and inside this icon i'm going to use one awesome icon and the icon will be like shopping hyphen bag and after this expand tag i'm going to show like is empty so you can see that we are able to see this message and i wanted to add one button here to get all the item from the card so if you wanted to play more around this application so you can also start from the scratch again by fetching all the card from our store so we can have one button here after this h3 tag so mdb btn and it will be having like get items and class name i'm going to give here mx hyphen 2 okay and let's see how our button look like so it's fine okay now we have to write a basic reader section to get all the card from our store so here i'm going to write a redux action basically to get all the items okay so we can write this action and simply we can do like state dot items equal to data okay and we can export this action get cart items we can use this action inside this cart container.js file and here we can use on click method and we can display that one dispatch get card items let's save this file and let's go into the browser now let's click on this clear card so now we got this message like your shopping bag is empty and if you click on this gate item you will get back all your item that we have in our data.js file so that way you can also play more around this application so all functionality is completed okay so you can see that everything is working expected the last thing is left like if you are refreshing this application so i wanted to persist all the value like total along with this value and this value so we are going to use here redux purchase to persist all the card value so if you refresh this one for now it will get reset so we wanted to purchase the card value so we are going to use redux purchased with the reader toolkit so guys now i am going to configure redux persist in this react application so what i can do here so first we need to bring storage so we have already installed this package at the beginning and we also need persist reducer from redux persist okay persist reducer and we need combined reducer from our redux so so we have bring this combined reducer from redux now we have to write here persist configuration so persist config we have to give your key root version 1 and we have to pass the storage now we have to use this combined reducer so const reducer is equal to combine reducer and we can basically cut this one and we can paste here okay and then we have to persist our reducer so persisted reducer is equal to persist reducer we have to pass the configuration this persist configuration and then we have to pass the reducer and here we can use this one okay now we have to also do some adjustment inside this index.js file as well so here what we have to do so from redux persist we need to bring purchase store and we have to import persist gate as well from redux purchased you have to go to integration and react okay and it will be persist gate now after that we have to use this persist gate so we have to wrap our component with the persist gate then persister and here we have to use let persister filter persist store and we can pass here store okay and we can provide here persister so let's save this file and verify this one in browser refresh this one so we don't have any issue so let's perform all the operations so this is working so total is getting updated this one is also getting updated now let's refresh this application so you can see that after refreshing our all value is getting persisted over here so total value is also getting persisted the quantity is also getting persisted and total quantity in the cart is also getting persisted so we have successfully able to purchase the card value as well in this application so now i hope you have understand the shopping cart functionality with the help of redux toolkit in this react application so thank you so much guys for watching this video and if you find out that video is useful then please subscribe this channel and like the video as well so i will see you in the next video till then good bye and take care

Channel: CodeWithVishal

Views: 13,340

Keywords: React Redux-Toolkit Shopping Cart App, Redux-Persist with Redux-Toolkit, react shopping cart, react shopping cart project, react shopping cart app, react shopping cart with redux, redux toolkit shopping cart, react redux toolkit shopping cart, redux shopping cart, shopping cart using redux, redux persist redux toolkit, redux persist state, shop app react

Id: Rp5abw5PwYU

Length: 57min 25sec (3445 seconds)

Published: Sat Mar 26 2022