‫So, let's now model and implement
‫the more complex cart state and by doing this,
‫we will then be able to implement or to finish
‫all of these features over the next few lectures.
‫So, let's start by creating a new Redux state slice
‫right here in the Cart Features folder.
‫And so this is the beauty of having this features folder
‫in the first place because it allows us
‫to nicely co-locate all of these files that are necessary
‫to implement one of the features all in one folder.
‫And so, again, we then could close
‫all of these other folders here
‫and then while we are implementing a certain feature,
‫all we have to worry about is that particular folder.
‫So no jumping around all the time.
‫But anyway, let's again start with the initial state.
‫And then all we will need in the state
‫is actually one cart array.
‫So this is where we will store all the items in the carts.
‫And actually this is a property, of course.
‫So, many of the state management principles
‫that we have learned throughout this course
‫still apply here to modeling state in Redux.
‫For example, the fact that whenever possible,
‫we should always derive state.
‫And so that's the reason why we are not storing,
‫for example, the total cart price here.
‫So we could store the total price here also
‫and maybe even the number of items, right?
‫However, we can easily derive these
‫from the cart array itself
‫and so then we don't need to create these
‫because that would just create more problems
‫because then we would have to keep them in sync
‫while we are updating the cart.
‫All right, and so this really is all that we will need.
‫So, let's create our cartSlice here
‫again by calling create slice.
‫The name here is of course Cart,
‫the initial state, and then our reducers.
‫So let's think exactly what operations we need for the cart.
‫So, first of all, we need to be able
‫to add a new item to the cart, right?
‫So, that's our first reducer here.
‫So, as always, that takes the state and the action.
‫And now let's do a couple of more.
‫So let's just duplicate this here a few times
‫and then let's think about what else we need.
‫So we need to add an item, we need to be able
‫to also delete an item,
‫and maybe we might want to update an item.
‫However, we don't really want to go that way.
‫So we don't want to be able to update one entire item.
‫The only thing that we will want to update
‫about the item is the quantity.
‫So according to the application requirements,
‫the users should be able to add multiple pizzas to the cart.
‫And so, for example, they might want to add five pizzas
‫of a certain type and so to do that,
‫they will then click some button that will always increase
‫the item quantity, which I'm sure you have seen
‫in many online shops around the web.
‫And so let's simply implement one reducer for this activity.
‫So for increasing, so increase the item quantity
‫and then also one for decreasing.
‫So decrease item quantity.
‫And then finally, right in our cart page,
‫we also have this button here to clear the cart.
‫And so we need then also a reducer
‫and an action creator for that.
‫So clear cart and now, let's implement
‫the code here for all of them.
‫And to make this a little bit easier,
‫let's add a fake pizza right here.
‫So let's comment this one out here
‫and then for development purposes,
‫we will already add one pizza here to this cart array.
‫So one object which will always have the pizza ID,
‫set that to 12, then the name,
‫this one is the Mediterranean,
‫then we also have the quantity, which is two,
‫the unit price of 16 and then,
‫even though we could also always compute it,
‫let's also include the total price.
‫So that's basically just the quantity times the unit price,
‫but let's just edit here anyway.
‫So even though this is technically a derived state again,
‫it's nice to not always have to compute it on the fly.
‫So you need to decide these kinds of things
‫really case by case.
‫And this is really just a small thing, so let's,
‫as I was just saying, add it there.
‫And by the way, the reason why this is the shape of the data
‫is because what we get from the API in the menu
‫is very similar to this.
‫So let's actually inspect that.
‫So let's do that right here in the network tab.
‫So this is a really helpful tab
‫and so let's use it here from time to time.
‫And so when we go to the menu, this will then show us
‫exactly the data that has been received.
‫So let's filter here by fetch requests.
‫Then here, we need a bit more space.
‫And so here it is.
‫So as we click here, we can then preview the response.
‫And so here we have the data.
‫So we have the ID, we have the name,
‫and we have the unit price.
‫Of course, we don't have the quantity and the total price
‫because that just doesn't make sense here in the menu.
‫Right? But we do actually have that data
‫when we fetch one single order,
‫but let's not do that right now.
‫So this is just the shape that the data has.
‫And if you are really interested in modeling this data,
‫so basically deciding what exactly all the data
‫in our application should look like,
‫we will do something like that in our next application
‫because there we will even create the backend ourselves.
‫So we will create all the data from scratch
‫and by then, we will really learn about how to think
‫about what data we really need.
‫But anyway, having now this fake cart right here,
‫it's a bit easier to implement these different reducers,
‫at least some of those right there.
‫So, whenever a new item should be added to the cart,
‫how do we do that with our code?
‫Well, remember that here we can actually mutate the state.
‫And so we can just say state.cart.push
‫and then push the newly received item in there,
‫which in this case is going to be action.payload.
‫So let's just write that down here.
‫So the payload here needs to be equal
‫to a new item, basically.
‫So just so we know what exactly that payload always will be.
‫And remember that the payload is going to be
‫simply what we pass into the action creator.
‫So when we dispatch an action.
‫All right, next up, when we delete an item,
‫here the payload that we will need
‫will be the ID of the item, right?
‫So basically the pizza ID because that's the name
‫that they have here in the cart.
‫So when we delete, we will try to find the item
‫with that ID and then delete it.
‫Now, since here we are actually allowed
‫to directly mutate the state, we could use the splice method
‫and then directly mutate the array.
‫However, I find it a lot easier to still use
‫the filter method like we have been doing all along
‫because it actually requires a lot less code.
‫So what we can do here is to do state.cart
‫and then set it to state.cart and then filter.
‫So let's call each one an item.
‫And then whenever the pizza ID is different
‫from the one that we passed in, so action.payload,
‫it will still be part of the new cart.
‫So of the updated cart, right?
‫But in case that the action payload is equal
‫to the pizza ID, so for example, number 12,
‫then that item would be removed from the cart.
‫So this filter is exactly what we have been doing all along
‫with the difference that now we assign this new array here
‫then to state.cart.
‫All right, next up we want to increase
‫the quantity of a certain item.
‫So the way we can do that is to first find that item
‫and then we can mutate the quantity on that item.
‫So that's state.cart.find.
‫And then
‫we are again looking for or we are actually passing in
‫a pizza ID as the action's payload.
‫So just like we have here.
‫So with this, we selected our item basically
‫and now we can just mutate it.
‫So we can do itemquantity++.
‫And then from here on, this value has already been updated.
‫And so then we can calculate
‫item.totalprice from that value.
‫So item.quantity
‫times item.unitprice.
‫So since we have both the quantity and the total price,
‫which depends on the quantity, we need to not only
‫update the quantity, but also the total price.
‫So basically keeping them in sync here.
‫But since we are using reducers,
‫we have all the state updating logic in one place
‫and so then that's pretty easy to do.
‫So to decrease the quantity, we will just copy and paste
‫this code here and just need to change this line right there
‫and then finally here, we need to clear the cart
‫and clearing the cart is as easy as setting the cart
‫back to the initial state or in other words,
‫doing state.cart= this.
‫And so here we actually don't even need the action.
‫All right, so these are our four reducers
‫and so let's now grab the five action creators.
‫So five reducers and therefore, five action creators
‫from cartSlice.actions.
‫So we have our actions
‫and then we can immediately destructure them.
‫So addItem,
‫deleteItem,
‫increase quantity,
‫decrease quantity, and clear the cart.
‫And then we export all of those.
‫And here we go, we forgot the assignment,
‫and finally, let's also default export cartSlice.reducer.
‫Great. So this is what our cart slice looks like
‫and we will come back to this as we actually use it
‫because we will even need to change something here later.
‫But for now, let's come to our store.js because, of course,
‫we also need to now connect this new slice to our store.
‫So cartReducer from features cart, and then cartSlice
‫and then here, cart and cartSlice again.
‫Or actually that's not true.
‫It's a cartReducer.
‫So here, let's remove that.
‫And there we go.
‫Nice. So we can close this up.
‫And so in the next lecture, we can start adding
‫some of these pizza items here to the user's cart.