React State Management using Redux (Build a shopping Cart🔥 )

hey what is up everyone and welcome back to another video in today's video we'll once again be looking at state management in react but this time we'll be using redux so if you haven't seen my previous video on state management in react where i use the context go check it out the video will be linked in the description so what exactly is redux well redux is a predictable centralized and flexible state container for javascript applications so that is important to note that redux is not built specifically for react it can be used completely separate in any javascript application so in today's video we'll be looking at how we can combine react and redux to create our state management workflow i'll be showing you how to implement redux by creating this little online shopping cart tutorial so let us look at what we will be building today i have already created in the starting files all of the components and their stylings so in this video we'll only be focusing on how to connect redux and control our state so let's take a look at what we have here we just have a basic ecommerce demo site which has a shopping cart capability so these are my products each one of these are individual product components on my product page and if i were to view a single product i get that state and it is pulled from the the redux into this page and i can add an item from here and if you you see i add an item the counter up here increments so if i were to go back and add something from here i want to add one of these items say this one and now if i go to my cart page i can see both of these items being logged in my cart i can see all of their data their individual price everything like that and then i can see the quantity of both of these how many times i selected them i can increment and decrement this counter and as you can see the state updates in all of the components so if i were to put this back to one and you can see this price corresponds to both of these having a quantity of one and if i were to say i don't want to read i want to delete this then you can delete the items from this page and everything else around the application will update so this is the main idea of this application and so now that we have a very good idea of what we will be building today let's dive right into the code and see what is going on over there okay so for our starting application i have all of the files for the starting products with starting product which is this one we are seeing right here all of this is just hard coded nothing here actually works so the view would work but everything is hard coded so i have the files for both the finished end product and the starting files in the description below so if you want to follow along you can just download the starting files and then work with me from there so basically we just want to implement redux into this application to get it up and running so i'm just going to have a quick run-through of what we currently have here so we don't have any redux in this application yet so basically let's start at the app file so here i just enable the routing so i use the react router dom and i just enable the routing for me to be able to switch like this between different pages and different components so this is technically the any the only thing that happens over here and then if i go to the nav bar which is this component that is rendered here the nav bar is basically just two links one that links back to the home page for example if i were to go to the cart and i click on the on the link here it goes back to the home page and then the other link to go to the actual cart so if i were to click here it goes to the actual cart so that's all that's happening in the navbar and that counter this counter over here can be found right over here in the nav bar so that is what we're going to also update with redux so that is the nav bar if we go to the products folder you can see these products the plural and then the individual folder so the products page this can be seen as a products page so this would be this part of the application not the navbar included only this part and then the individual product would um obviously be this uh little card that is rendered here to display each individual product um okay so that that would be all for for the products and then the single item is obviously if i were to click on view item this would be the single item part of the application so if that done we know what the folder structure looks like so let's dive right into it okay so i'm just going to close this up here so we can start start or clean so we want to implement redux so let's start right away with that so first things first would be to install the dependencies so let's quickly install them there are two of them the first one is redux which is the redux package itself and the second one is react redux this is the connection between redux and react the package that helps us connect the two so let's install that and while we wait for that to install we can go into our source folder and create a redux folder in here we'll do all of our redux setup and managing of the reducers so in our redux folder i'd like to start off with two files the store.js and the root reducer.js file so the store is basically you can see this as one big centralized place where all of your state data is stored hence the name as well this is where all of your data is placed together and the reducer the root producer is what's good connected to your store so that you are able to manipulate and change and reorder all of the data as you want so let's start with the store to start of the store we have to import create store from the redux package from redux if i can just spell like this and then we can create a store variable oh my goodness a store variable and we set this variable equal to the store function we just imported up here and this create store takes in a reducer as you can see here a reducer and then some enhancer we'll get to the enhancer in just a second but we'll first create this reducer so this would be what is going to be created in this reproducer file so with that done we can export default just so that we don't forget this the store variable so this is just we are later going to use this variable in our different react app okay so we can save this and then we can go to our root reducer file in here we want to import also from redux we import combined reducers so combine reducers what it basically does is like in the name we can have different reducers in our applications so one reducer will handle the ui state another reducer will handle the shop state and so on so this will just combine all of those reducers into one reducer and we're calling that one reducer root reducer and then we pass it this route combine retroducer and this takes in an object and in this object we pass all of the reducers we want to combine so i'm just going to keep it empty for now because we haven't created any reducers yet but this will be where all of the reducers go in and is combined so once again we'll export this root reducer because we're going to need this function or this variable we're going to import and use it inside of our store so here i can say import root reducer from that retroducer file now as you can see in there i just pass this right in here just like that and we're basically done with the store later we're going to add an enhancer to use the react dev tools but with that done the last step to connect our redux store with our actual react application is going into the index.js file this is the topmost level of your application this is the top top top component and here is where we use the react redux package so i'm going to say import something from react redux and this something is going to be a component called provider this provider is basically the same as the context way of sharing state you are going to wrap your app component with this provider so let's quickly do that we say provider and then we just wrap our app just like that this provider takes in a prop and this prop is called store so you can probably see what we're gonna do here we're going to import this store and pass it in right over here so let's quickly do that so we say import store from the redux folder in the store file and then we just pass in the store right over there just like this with this done we have set up redux for our application so the last thing i just want to do is quickly add in the react dev tools so we can use it inside of our browser so in order to do that i'm going to open a new tab and then we go to chrome and we can say redux dev tools and then the first chrome extension that pops up we go to redux dev tools and you can just say it would give you here it says remove from chrome i already have it set up so you can just say add extension and then it would bring up this redux dev tools in your extensions you can see it right over there this little thingy right there and the redux devtools is basically what makes redux so amazingly powerful because you can see states movement and all of this fun stuff so if once it is installed and added to your browser you can go into your inspector and you'll see a tab called redux but you can see now nothing shows up here so let's connect our application so this application running here to the redux dev tools and in order to do that we have to install a package called npm install redux dash dev tools dash extension just like this once this is done downloaded we can go back to our our store here we say create store and we're going to import one single thing the install is successful now we can import from that package we just use the react redux dev tools we're going to compose with devtools so this we just extracted or imported from this package is a function and this function will pass as this enhancer so we can say compose with devtools and then we run it as a function with this done if we save and we start our application now and we go to it's opening another one and we go to the inspector and into the redux we can see it has a different user interface now so this means if you see this it means all is good and your application is connected to the redux dev tools so this is all great so let's continue and what i'm going to do is create a folder i'm going to just close all of these up this one i'm not going to close the root reducer because we're going to use it in just a second but in the redux folder i like creating all of my different reducers in their own separate folders so i'm going to make one for shopping which is the only one we're going to have but if you have authentication ui you'll create different folders for them and inside of this folder i create three files it's shopping types dot js and then shopping dash actions dot js and then shopping dash reducer dot js so now i have all three of these um different files so inside of the root reducer we have not passed anything to the combined reducers so this would be this file we're going to code everything in here in just a second but this file whatever is going to be in here which is going to be the reducer function we have to pass this reducer function import it first so let's quickly do that we can say import shop reducer from that file so we can say shopping and then shopping reducer and then we can just place this one right in here we'll call this key value pair shop and then i pass it the shop reducer just like this so if this is done our root reducer file is completed and we can close this up so now let's start with the types i like starting with the types because types let you think about what your application needs to be doing so if we go back to our application and think about what our application needs to do we need to be able to view an item and in order to view our item we need that items data so that's one thing another thing is add to the cart and when we go to the cart we need to be able to adjust the quantity and then we need to be able to delete an item so those are the four types of actions we're going to need so basically what we do here is we say export const add to cart and we set this equal to a string and we just add the string in here so this is just string identifiers and the reason we use string identifiers it just helps for importing and it helps to avoid spelling mistakes and it's just really cool from cart copy this and then add it as a string this is really really really simple and you'll see where we use it in just a second if you've watched my context you'll see it's basically the same adjust quantity you can copy this and add it in right there export const and we can say load current item and i like the giving in descriptive names because then whoever uses this actually knows what all of these types would be doing so you say export and then a constant and then we export it so with this done we can save and we're completely done with this file so now i like to start with the actions so i say import star which means everything has action types from the slash shopping types i want to use all of those constants as action types so now i can create all of these functions i can say export because i directly export these functions and i can say const add to cart and this function will take in item id because when we add it to the cart we're going to go through all of the products that we have and search for that specific id and add that id to the cart so this is the reason i only use this because say something were to update in your back end say the price would update you don't want to add the old price you want to add the new price and this just helps with that balancing effect so once we get the id we just return so this function will be called inside of our dispatch so we'll dispatch something with this function with this argument and then we'll return some type and this type would be equal to actions types dot add to cart and then i will send a payload to my reducer and this payload will contain an id and i'll send it the parameter that is passed in so let's do this for all three of the others so i can say const to move from cart and this takes in item id as well because i want to remove that specific item with its id from the cart so i can once again return a type of actions types dot remove from cart and then a payload once again same same just like that then i can say export const and here i want to adjust quantity and in this part i want to get two arguments i want to get the item id and the new value so if i were to go to our application and i view this cart this quantity for this specific id i want to give it a certain value so if i were to click up and down it's not a link now but we'll do it in just a sec i want to send this value as an argument as well so here i can once again return i want to return the type of actions adjust quantity and then a payload containing two fields this would be the id which is equal to item id and then the quantity the new quantity which would be equal to the value so with that done we can save and then the last one would be to load the current view so we can say load current item and in here we're just going to pass the entire item just as it is shown in the front end so we'll receive the entire item with all of its data as an argument and then you'll just return the type of action type dot load current item and a payload and then i'm just going to pass the item directly onto the payload so if this done we're done with the actions file so nothing has been done yet with our components so this is all just a little bit of boilerplate but once you get this done it's really easy to start working with your data especially if you figured out your types from the beginning then it makes it really easy to figure out what you need to do here i'm not going to handle any asynchronous requests with something like redux thunk or redux saga i'll do that in a completely separate video i just want to focus on how redux actually works and how you connect it to your application so once we're done with that we can continue to our reducer so this function will be sent or dispatched is the better term to our reducer containing this string identifier so now inside of our reducer we once again import all of these action types from the types of file and a reducer is basically just a function it is a function that takes in some state and some action the action is the the part that gets dispatched and it contains this type right over here this type will be on on this action that is dispatched so this state we have to send it some default state so i'm going to say const initial state and set this equal to an object and this would be the state of our shop so our shop would have products this would just be a normal array of products and each product will be an object that contains an id it contains a title a description a price and an image and then we'll have the next thing which would be the cart the card would be its separate array and it would also contain an object of the same but in this case it would have a quantity added to it as well so if i were to do it like this it would have a quantity field as well this would count the amount of times right over here how many times you've had that product and then the last one would be the current item and we'll set this to null initially so let's start with the switch statement in here and the switch statement you can do this with if statements as well but switch is just much more easier and cleaner in my opinion so we can say if this action.type so this action that is sent to this reducer if it's type so this part over here is equal to action types dot add to part then i want to do something to the state i won't start with that now but i'm just gonna put all of them in here all of the actions so action type dot remove from cart and then i want to do something to the state in this return right over here you can break this down into functions and return that function but i'm just going to make it t i'm just going to make it as obvious as possible so action dot types and here i want to adjust quantity i want to do something to the state and then action types and i want to do load current item and here i just want to do something to the state when i say i want to do something to the states i'm going to manipulate this state right over here and now that i see it i have not yet passed this state in as default like this so now i just pass into the state a default state and then the last thing i need to do is default so if none of these string identifiers are used i don't want to do anything i just want to return the state just as it is if i save this i want to export this default function and save this if i go back to my application i can now see my state i should be able to see my state here is my state so i this redux tools is really amazing i'm not going to go through all of these gadgets you can have you can time travel see what happened in your application but it's really really cool so i'm going to the state tab and now i can see my state of my application it would be my products my cart and then the current item so if this all done let's now before we actually do the logic of managing the state let's go connect our redux to a specific component and see how that would work okay so let's start by going to our components folder in the source folder and here we'll navigate to the products folder inside of the products folder we have our product and then the products page on the products page we're basically just rendering one product component so if we check in our application we can see i'm just going to close this down for now we only see this single component so this is all static so we don't pass anything in here so if i were to go to that component we can see everything is hard-coded from the image to whatever the title and description and price it is all hard coded and we want to change that by um connecting it to a redux so i'm just going to close the actions i'm going to keep the reducer open and then i'm just going to open the products file and in here we can start by connecting redux to our react app and in order to do this we use the react redux package and something valuable it gives us is the connect function so we can certainly act redux and we import the connect function this connect function basically allows us to const map state to drops so this basically tells you exactly what it does and i'll get to it in just a second so now i can choose what state in my redux store i want this this component to have access to and this connect function we'll send it in as a higher order component and we pass it in as a parameter this map state to props just like this and then pass the products in its own braces as well so now we can return from the state we we pull it from i want the products so if i were to go to my root reducer i want this array because i want to render those products each one of them individually in this products component so in order to do that i say return products and now i tell the react redux to where to get it so i want to get it from the state so the store and i want to go to the shop and the reason i say shop is because if you remember inside of the um root reducer we named that piece of the reducer shop so if there were multiple reducers you would give each one of them a different name and this shop refers to whatever state is in this reducer so anything in here so we can say shop.products now we have access to this products inside of our props because it maps the state to props so now i can destructure products just like this like so and then i can do a simple map function i can say products dot map and then for each product i want to render this product component so if i save this and go back i should see no products being rendered oh i was on the wrong page so now we can see there is no products being rendered so this means it works because if we go to our reactive redux dev tools we can see that the state is empty there is no products in our array so it's rendering nothing but i'm going to insert a few products in here i'm just going to copy and paste it just like this and if i were to save this and go back to my application i can now see that there are three components being rendered because there are three items in my products list but each one of these have this exact same hard-coded values so now i want to insert each of the individual values dynamically so in order to do this this is just basic react i'm going to say product data is equal to that product being sent and when i do this i have to give each one of these individual components which is rendered in a list a key and that is what this id is useful for as well so i can say this product being mapped through give its id as a key so if i were to save this nothing would change but if we were to go into my individual product component i can now destructure this product data which i passed in here as product data and i passed it the entire product so now i have access on this product data to all of the the individual key value pairs on this object so now i can dynamically insert it i can change this source to product data dot image and the alt i'm going to set equal to product data dot title i'm just going to copy product data so i don't have to type that over you can destructure it as well but for simplicity and time i'm just going to do this like this product data title and over here we have product data dot description and then i have product data dot price like this and then where do i have next this should be everything for now so if i were to save this and go back to my application i can now see that each one of these individual components are rendered dynamically based off of the product state whichever is in the store so you can use your back end to pull data and populate this products array but for simplicity and just understanding how redux work i'm not using any asynchronous back-end requests for now i'll do that in a separate video so now we can see this working so now in able to connect we import this connect function we say map state to props and we use this higher order component to map this prop to whatever state we need to pull out so let's continue on by um completing the the cart so if i were to add something with this button it would update the cart value so now we're going to work on the cart values in order to do this we have to continue working on the shop reducer so now starting with our shop reducer the logic for handling the data with every different action being dispatched i'm going to quickly go through this so the first one if you want to add something to the cart there's a few things we need to do first we need to check if the item is in the cart already so if it's already there we don't want to create a separate entry in the cart we just want to adjust the quantity and before that we want to get the items data from the products array so in order to do this we can say const item which we just name it item so the specific item that comes in we want to say state dot products dot fine so here we can say for a specific product we want to find where the product dot id is equal to the action dot payload dot id because if you remember this action.payload if i go back to the actions this action.payload contains another embedded key value pair which has an id so in there we say if that action.payload.id is equal we want to get that specific item from the array so basically what this would do is it would go through the array and find that specific um entry and its data and then after that what we want to do is check if this item is already in the card so we can say const is which is in cart let's just name it in cart and here we can say state card dot fine and we can say item and here we can do a little bit of ternary we can say item dot id is equal so if this item we're looping through in the array is equal to the dot action.payload.id i want to return true to this variable else i want to return false so now true or false will be saved in this in cart if this item is already inside of our cart so now let's manipulate the data so we can spread the state because we have to always spread the state because it is reference types an object is a reference type so if we don't mutate it properly we'll lose or overwrite our data so we can say cart so we're going to this specific key value pair and now we check if it's in the cart so we can say in cart so this should be true or false if this is the case i want to say state dot part dot map and here i want to take the item and say if this item dot id is equal to the action dot payload dot id if this is true i want to create a new object for that specific entry so if i were to go up here and i'm searching for two i would say okay this is not equal this is equal so i'm completely going to overwrite this one so basically what i do is i say spread that current item in a new object and adjust it its quantity and i want to say item dot quantity plus one so if it's already in the cart i just want to add to its quantity else i just want to send that item so this generally will work as follow if this is true or false so if it's true i want to do this if it is false i just want to create a new array spread the current state dot cart in there so i want to create a completely new cart and spread whatever is in the cart in and then i want to add a new object and in this object i add that specific item which is referring to this item up here and i want to add a quantity to this object and set it equal to one because now it is its first time inside of this cart so i just want to add it like this if you don't understand this i suggest going checking checking up and learning more about ternary operators and how to use them it's really really simple if you get the hang of it if you start reading it correctly so i'm just going to go over it one more time and then the rest i'm going to do quickly so we spread the state because we don't want to lose the current or all of the products so we spread the state and in the cart object pair we check if this check returns true so if it is in the cart all i want to do is map through the cart and find that specific id find that specific item and then i want to change its quantity so i want to spread the all of the data that's inside so if we check with this i want to add everything that's in there but i want to adjust the quantity so i say the quantity is equal to whatever it currently is plus one else i just want to send it the item and then if it's not in the card so if this part is false this part will happen so i would create an array spread it into the array and add that to the state of the cart so let's remove it from the cart so basically we once again spread the state and here it's pretty simple we just say cart and we say state dot cart dot filter and basically all we want to do is we're going to go all through all of the entries in the cart and if that entry is not equal to the action.payload.id that we receive from our actions then i don't want to return him so what this will do is it will return everything except for the one we want to delete so the new array will not contain the the old the old item so that is done with the deleting and adjusting is a little bit more tricky it's once again a little big ternary operator but we will get there we say state we map the state or spread the state and we say cart state dot card dot map because now we want to go look for that specific item in the cart and we want for that specific item we compare it like this once again action dot payload dot id and if we find that item we want to recreate him by spreading the item again and setting the quantity value equal to whatever we got on the action dot payload dot quantity if you remember from the actions when we adjust the quantity we get two things on the payload we get a quantity and id so in the reducer i say if i find that that id in the cart i want to recreate that object by spreading the current item and then just setting its quantity equal to whatever the quantity was set to else i just want to return the item just like this very simple and then loading the current item into state we can just once again spread the state and we can say current item is equal to action dot payload because we just send that individual object and set it where it is currently now so with that done we were basically done with our reducer so now let's not focus on the reducer anymore and let's continue to making the logic in the application work so we're done with this and now we can start using the action functions to manipulate the data currently we're just reading from the state but now we want to do something that when we press a button it actually sends off some function to manipulate the data so let's do that let's work on the add add to cart so in the product file we have these two buttons we have the view and then the add to cart so i want to use that add to cart function in my actions so this one up here to um to add it to the cart from this button so we can do the exact same thing we can say import react redux and then we can cons and this one is map dispatch to props so this patch basically just means sending that function so we can say dispatch and here we once again return we want to return add to cart and here it takes an anonymous function and this anonymous function will dispatch that add to cart function and in order to use this add to cart function over here we have to import it from these actions you can see we exported directly here so we have to import it so down here we can say import something from and now we have to navigate all the way to that redux folder and into the shopping and into the actions so here i can destructure add to cart just like this now i have i have access to this add to cart function inside of this component so i can once again destructure it from the props and whenever i click on this button so i can say on click i want to run this function and what this function is going to do it's going to add to cart and the add to cart um wants a id it wants an item id so in here i can say there's anonymous function receives an id and it is passed to the add to cart so in here i have to pass an id between the brackets and i get that id from product data productdata.id just like this so if i were to save this i have not yet connected the dispatch to prop to my component so i use the connect i say null because i'm not using any of the state so i'm not mapping anything to state to props so i have to say null and here i can say map dispatch to cross and then with this done we can go back to our application and if we check in the redux tools if i were to click on add to cart we can see this add to cart string identify fired off and something happened here and if i go to my state i can now see inside of my cart it has a item this item contains all of this data so now we want to let the now we have to try and update this value over here and once we click on the card we want to see the specific card not any hard-coded values so let's first focus on this little counter over here okay so we're basically done with with this part which is a great thing we can actually do the the add to current well we'll get to that in just we'll get to that at the end okay so let's go to the nav bar and inside of the nav bar we want to check how many items is in the cart so we once again going to say import connect from react redux const map state to drops so here we're not dispatching anything we just want some state and we want to return the cart from state dot shop dot cart and i want to connect this by saying map map state to props just like this now i can destructure this cart out of the props and i want to do the following calculation on this in order to do this i'm going to import two things from the react i'm going to use state because i'm going to set that counter to a state so it will keep on refreshing and use effect so use state i'm going to set equal to zero and i'm going to destructure out of this use state array destruction i'm going to call this cart count and set cart count and you can see what i'm going to do here this is going to be the value that is being rendered over here so i can say part count just like that now if i were to save this and go back you can see this is zero it was one initially hard coded but now it's zero because it's actually the state value now i want to update that state value based on whether the card's quantity changes and that is what i'm going to use to use effect for so this will happen as follows so use effect and i would give it a function to run and then in this array at the bottom of use effect i would add in the cart so if anything changed on this cart i want to refresh because that means the counter most likely has to update and then if this card count value changes it should also refresh and i'm just adding that as a dependency so i can say let count equal zero and this would this will count how many values are in our cart so we can say cart which we import or this structure as props for each item in that cart array count so set this count variable plus equal to item dot quantity so i'm going to try and expand this as quickly as possible if we go to our reducer each item in the cart has a quantity so if i were to add two items in the cart with quantity two then the total amount of items in the cart will be four so this is what it does here it loops through the cart array and then it counts all of the quantities of each of the items that is added and that will populate the the count once that four is done i want to set the card count equal to whatever count is and this will update depending on the size of the card so if i were to go back and i would just add to cart you can see this thingy updating so if i were to click it again it would update if i would go here and update so this is all great if i go into my redux dev tools just to prove to you it is working we can see that the state under the shop the cart now currently has three items and each one of these three items has a quantity of two just like that so now we want to go into the cart page and render each item in the card so let's do that next so let's close all of this up we can go to the cart folder and inside of the cart file here i want to render this dynamically so once again i'm going to import connect from react redux and i'm going to do the same thing i'm going to say const map state to props equal to some state or this function as state as a parameter and then i want to get the cart and i want to extract it from the state shop dot co then i want to connect this to my component okay so now that is done so i can destructure the card out from here just like this now i can map through the cart i can say cart dot map and for each item in the cart i want to render the card item and this is working in the same fashion as the products that gets rendered so this is going to be hard-coded for now but we'll see if we go back here and we add things to the cart there should be two components being rendered so we haven't updated this yet but this would be in the individual card so all of this is still hard coded you can see it's the same things but it's two different components so let's quickly do that so inside of the cart item i'm going to receive a few props so instead of this cart item we can destructure a few things so let's first pass it in as props so i want to pass the item data and i'm going to send it this item and then once again a key i want to give it the item dot id to save this and go here i can destructure the item data and now use that to fill in all of these so i can say item data dot image i'm just going to copy this and change the last part every time so the alt i'm just going to set equal to title the title is obviously going to be title the description will be description and so on i'm just going to go through this video and then when we get to this quantity of the input we want to set its value equal to whatever the quantity was logged in the state so we can say here equal to the quantity so we're going to have to put it on change value here if you want to change it to adjust the values in just a second so with that done that looks like everything so let's save let's go back to our application add something to the card go to the cards and now we can see that specific item so if i add something else i go back i can see the different item if i were to add two of them you can see it's three and now the quantity over here is two this is not updating correctly so we'll quickly handle that so it's in the physical cart here we render the card summary and in the card summary we want to render the total amount of items in the cart and then the the total price so we need to calculate two things in this component so we are already um using the cart from the redux so we can just do this again as we did with the nav bar we can say use effect and use state and here we can say const use state and set this equal to zero and just create two of them and then in the array destructuring this one will be for the total price and set total price and this one will be for total items and set total items so these are the two things we will need we need the items that is in the cart and the total price of that cart so in order to calculate that we go to use effect and we run that function and in our dependent dependencies array we add in four things we add in the cart the total price the total the total items sorry excuse me it's five things and then the total set price and then the set total items just like this just going to name it items so if any one of those things had to be changed or to be used we want to use effect and now we can create our variables lit items equals zero and late price equals zero and here we can say cart dot for each item in the cart we wanna set the items plus equal to the item dot quantity so this is the exact same thing we did in the nav bar and the next one is the price we want to set equal to price equals to that items quantity so how many items is selected times that item's price so if i were to go back i have three items so it's 15 for a single item and i have only one of them so this would be 15. if i had two of them like this it would be 20 times 2 which would be 40. so that is why i calculated like this and i just plus it to the current price and then at the end i just set the total price equal to price and set total items equal to items just like this go to save this first before i save i want to change this i want to set this items to total items and this price equal to total price just like this yeah okay mr bracket if i save this and go back my card is cleared because i refreshed now i want to add to the card each one of these if i go back to the cart i can see the these two things updated correctly with the change of the card so now i want to activate this delete button to work it's currently not working so let's quickly do that so on the cart item on this delete button i want to activate that remove item from the cart function in the actions so i want to fire off this function so let's do that once again this is really tedious but it kind of brings the point home once you get used to doing this it's actually not that bad from react redux and then we prompt map dispatch to props and we get a dispatch and we return some function and this function is going to be remove from cart i'm just naming it the exact same so it just makes it easier and here i can say some anonymous function will be fired off this anonymous function will receive an id and i will dispatch this remove from part function so this remove dot card function does not refer to this one i have to first import this to use it so i will go here and i say import from and navigate all the way to the redux folder we are going to shopping and then get the actions and here i can pull out the remove from cart and with that done now it actually points to that function and i'm able to use it let's connect say null for props because we don't have props we map this patch to props like this and then we just add the component so if this done this function is now in the props so i can pull it out and destructure it out just say remove from cart and every time i click this button so on click i want to send an anonymous function and this anonymous function should remove from cart and this will remove the item data dot id so if i were to save this and go back to my application add a few things to my card go to my cart and click on this button you can see it removed the item it even updated the states if i do this i have nothing left so we're getting there we're nearly at the end thank you for holding on if there's something you did not understand leave a timestamp and a comment and i will try and get you as fast as possible i'm i'm going through it fast now because it's kind of repetitive the whole time but yeah okay let's quickly finish up so what we have to do now we have the ad it works perfectly all of this you can see we have to do this adjust the quantity and then the last one is viewing the actual page this is still hard coded so if i were to go here it would show the same thing so it's the adjust the quantity okay so this is pretty pretty simple inside of the cart item we have this input so on this input we can have a on change so every time i change this i want to call on change handler so i can say on change handler and i'm going to create this function now because i like doing it separate i don't like doing all of the logic in there so i can say cons on change handler and this receives an event and like this so if i were to console.log e dot target go to value and go back to our application and see what it logs out to me if i were to add something to the cart open my dev tools go to the console clear everything out here now to change something here and set it to 2 i can see that is updating so if i set it to 10 it is updating but you can see that it's not physically updating in the ui and the reason for this is because we're setting the value equal to what is currently in the state which is wrong we have to use two-way binding so we can say use state and create a use state for that specific input so you can say const input equals set input and here we can say use state and set this equal to one it should always be one or we can set this value actually equal to item dot quantity so instead of setting it here equal to items or quantity we set it equal to quantity there and here we can just say set it equal to input and if we save that item data dot quantity sorry just like this okay so let's continue with the logic of um the unchanged handler so whenever i use the unchanged handler i want to set the input equal to whatever e dot target dot value is and in the same time i want to adjust the value in the state so i'm going to have to use redux again i'm going to import the adjust quantity and here i can call it down here adjust quantity this is a function it receives two things remember it receives an id and a value and we can dispatch that adjust quantity and we pass it the id and the value just like this now we can use this in our props and destructure it out of our props where we at now right up here just like this and now we can use that function adjust quantity and we send it the current id so we can say item data dot id so whatever that current item is and then the e dot target dot value you cannot send it the input of the state because state takes a while sometimes to update so you won't always get the right value um when you set the input so this is why i'm setting it like this and if i save this this should all work if i go to my card nothing is there add something to the card there's two of two of this two of these items if i go down you can see oh it's changing to string so we have to make sure that our input so we have to check that the input that we log in our reducer adjust quantity this should be a plus to turn this value that is sent into a integer if we save that and go back to our cart and do the exact same thing add a few items so we have two items if i adjust this it turns to three the total amount updates as well chances to four and this is all working great awesome let me just do this so i can add this all the way we should just set a minimum so it can't okay it's already set to can't go below one so this works perfect and we can delete the last thing we need to do is viewing the item so i hope you're all doing well so far sorry this is a bit of a long video but i'm trying to cover everything and this is a pretty real life example of an application to use it so thank you for sticking with me okay let's do the the last part which is on the actual product so we can say on the product over here we have this link that takes us to some id so there's some id we have to the connect and here we want to import load current item we can add it to the map dispatch props load current item this receives the physical item so this receives the entire item not just some id so we dispatch load current item and we send it the item and now we can destructure it from our props item current item like this and whenever i were to press on this button so for to go back this button right over here i want the state to populate the current item so if i go into my redux tools my state this current object is null if i press i want it to populate this current item with whatever this current item's data is so let's quickly do that and our reducer already does that for us so we can just make this dynamic by saying whatever we clicked on so we get the product data dot id would be the url it would link to and then on click we want to load that data so we can give it an anonymous function let's say load current item and pass it in the product data just like that so with that out of the way all we need to do is go to our single item and here we have to load the right data from the current data so once again import connect react redux we go get the state we say map state to props and we return the current item and we get this from the state shop dot current all right let's see if i just named it that i'm not sure in the reducer i called it current item that is correct so now i just connect it to my component drops just like this i can now destructure it spend a mistake and destructure it from here current item and now i can use whatever is on the current item so i can say current item dot image and i'm just going to copy this once again and do it for all of the others i'm going to set alt title i'm going to set the title equal to title the description is going to be description and then the price is going to be equal to the price just like this awesome and then on this add to cart we can use the exact same function so we can import from all the way to the redux folder into the shopping actions we want to add to cart whenever we do that we need to dispatch so we can say map step map dispatch to props and then we return that function so we can say add to cart we get an id anonymous function which dispatch this function and we send it to that id and now we just pass it in as the second parameter dispatch state to props like this so now we have access to it in the prop so i can say add to cart and on this button when i want to unclick we just send it this current items id so we can say add to cart and then current item dot id and save so for to go back and close this up we already know it's going to work i'm very confident we can say add to cart and now i can go view data we'll see the specific item and if i say add a card here it should update there as well add to cart brilliant okay so this all works if i were to go and delete this and then view a different item which is dynamically rendered add this to the cart it should be 20 only one item i want to get four of these 80 bucks and all of this works so the last thing i just want to add this is basically just to make this a bit more secure so if i were to go to the item and i refresh the page the current item is cleared so it crashes so in order to fix this problem i go into the app file i'm just going to close all of this up i go into the app file and here i set a condition on this link so i'm going to create this and i'm going to use redux here as well so i can say connect react redux and i get the state map state to drops to return the current item and we want to get it from the state dot shop dot current item we want to map this to the component so you can say connect just like this now we have access to this in our app and we can see already i'm putting it out there i can call it current item like this and now i want to say the following i want to check if there is no current item loaded i don't want i want to redirect from this page otherwise it's going to keep on crashing so if there isn't if there is an item i want if there is no item sorry i want to redirect so here i'm just going to comment this out so from there react right to dom i'm going to redirect to the slash page else if there is actually something in there i can load this route just like this so now if i go back and i go to item and i refresh instead of crashing it would just redirect to the home page so that is the entire application i'm really sorry for this long video i hope for these of you who stick through it that it was helpful and i'm definitely going to try and make the videos a bit shorter and i'm going to try and make courses out of this so long playlist courses of how to build a ecommerce site chat app all of these fun stuff instead of making it one large video so thank you for those of you who stick with me through this and please remember to like and subscribe and if you have any questions leave a comment down below and yes i'll see you in the next one thank you cheers

Channel: The Full Stack Junkie

Views: 29,931

Rating: 4.9635534 out of 5

Keywords: redux explained, global state in react, redux and react project, what is redux, how to use redux, react redux state, advanced react concepts, reactjs, state management with redux, redux.js, react state management, statemanagement in react using redux, react redux tutorial, redux tutorial, web development, react development, learn react and redux, learn react.js, teaching react.js, web app state management using redux

Id: MNs_7avLIJ4

Length: 69min 58sec (4198 seconds)

Published: Tue Aug 25 2020

Reddit Comments

[u/fchoes]

https://github.com/concentjs/concent

[u/ZeroOne_Dev1]

Awesome

[u/AmeliaGrey100]

Biggest Challenge in React application is the management of state for frontend developers. In large applications, React alone is not sufficient to handle the complexity which is why some developers use React hooks and others use state management libraries such as Redux.

The components of React have a built-in state object. The state is encapsulated data where you store assets between component renderings that are permanent. For a JavaScript data structure, the state is only a fancy term. The UI may look completely different afterwards if a user changes status by interacting with your application, since it is defined by this new state rather than the old state.

If developers do not have scalability in mind, so when something goes wrong, it is very difficult to figure out what's going on. In your application, this is why you need state management. To resolve this particular problem, Redux was created. It provides a central store that holds your application in all states. The stored state can be accessed by every component without sending it from one component to another.

I came across a very useful article regarding the React State Management Using React Hooks and Redux: https://medium.com/@loginradius/react-state-management-using-react-hooks-and-redux-dab7541ba9f3

You too might find it useful :)