‫Let's now dive a little bit deeper
‫into the topic of Redux Selectors
‫by building the current overview component.
‫So let's open up that component right here.
‫And so basically what we want to do now
‫is to select the current state, and then from there,
‫compute the number of pizzas that are in the cart
‫and the total price as well.
‫So to read some state from the Redux store,
‫remember how we use the use selector hook.
‫Then here, let's just call the result of this X for now.
‫And so remember that in here,
‫we pass a so-called selector function.
‫That's why this hook is actually called a selector.
‫And so this time, let's actually write
‫a little bit of a more complex selector.
‫So as always, here, this function receives the state.
‫And then let's start by reading state.cart.cart.
‫So the reason for this double cart
‫is that, or state itself is called cart.
‫And then we have this cart property in there.
‫And here, we actually want right there.
‫And here we actually want to keep going
‫and immediately calculate the number of pizzas
‫that are currently in the cart.
‫So to do that, we can use the reduce method
‫which I hope you are familiar with.
‫So this gets access to the current accumulator value
‫which will just be the sum,
‫and then also the current element,
‫current element of the array
‫which we could also call item.
‫So let's do that, actually.
‫And so then in each iteration,
‫we will add to the current sum,
‫which starts at zero here as the second argument.
‫So to that sum, that starts at zero,
‫in each iteration,
‫we will add the item.quantity,
‫just like this.
‫And so then let's call this one here, actually,
‫the total cart quantity.
‫So Redux actually recommends
‫that we do this kind of data manipulation
‫that we just did here.
‫So selecting the cart,
‫and then immediately calculating the value that we want
‫right inside the selector function
‫and not out here in a component.
‫So doing it like this is a good practice
‫whenever we are using Redux.
‫And we will make this even better,
‫but for now, let's see if this actually worked.
‫So total cart quantity,
‫and indeed, we have now four pizzas.
‫So let's reload this.
‫And we already start with two.
‫So why do we have two?
‫Well, it's because here in the default cart,
‫we already have these two Mediterranean,
‫and so if we then add another one,
‫let's see, then we have three.
‫Beautiful.
‫Let's add another one.
‫And we could right now actually add this one again.
‫So then we would have five,
‫even though later on, this is not what we will want.
‫Because what this did,
‫if we check out the state,
‫was to add
‫basically this pizza here twice.
‫So the Diavola is now here twice with the quantity one
‫while in the future,
‫all we want is then to decrease the quantity here.
‫But again, let's leave that for later.
‫What matters is that this here is already working.
‫And so this selector function is doing its job.
‫However, Redux, again, recommends to take this function here
‫and actually place it right into the cart slice file.
‫So let's do that.
‫Let's cut it from here.
‫So then of course, we get an error.
‫And so let's place it right here.
‫So let's export then.
‫And then we need to give it a name.
‫So const get total cart price.
‫So here we are using an arrow function
‫because this is just a simple one liner.
‫So again, this is now a Redux selector function.
‫And the recommendation and the standard
‫is that these functions start with the get keyword
‫and that we have them all in the central place
‫in the cart slice file
‫because we will actually need this operation later on
‫in another component.
‫And so then all we will need to do
‫is to take this function here and just reuse it.
‫So here,
‫or actually here, let's now then import this.
‫So get total cart price.
‫Let's reload here
‫and let's check.
‫And indeed, it works.
‫Great, so let's keep going
‫and let's do something similar for the total price.
‫So coming here into our slice,
‫let's write another selector function.
‫I will just actually duplicate this here,
‫I'm just feeling a little bit lazy.
‫Just missing this part.
‫So get total cart.
‫And actually this one,
‫here's the one that should be called price
‫and this one was actually the quantity.
‫So this one is called quantity
‫and here also.
‫Well, we will also need this other one later,
‫but let's for now, just use the quantity.
‫And so here, all we have to do
‫is to change this from item.quantity
‫to item.totalprice.
‫And by the way,
‫having these selector functions here like this
‫might actually cause performance issues
‫in larger applications.
‫And so if you are really serious about Redux,
‫you can look into the Reselect library
‫which will allow us to optimize these selectors.
‫So that's this library right here.
‫Select like this.
‫But I will not go this deep into Redux here at this point,
‫'cause I think this is really not necessary right now.
‫But anyway, let's do total cart price here.
‫And so now the name of use selector
‫starts to make a little bit more sense.
‫Like this.
‫And then let's here use or help or function
‫called format currency.
‫And then here is where we use that total cart price.
‫And beautiful.
‫And as we keep adding here,
‫then the price increases and the number as well.
‫Nice.
‫And now just one final thing
‫which is that if we don't have any pizzas in our cart,
‫I guess we shouldn't even display this cart overview here
‫in the first place.
‫So let's get rid of this temporary cart.
‫Let's put it back to the actual empty cart.
‫And so then we get this.
‫So that doesn't make a lot of sense.
‫And so here we can easily say,
‫if there is no total cart quantity,
‫then have this component simply return null.
‫And so then it disappears.
‫So throughout the entire page,
‫now we no longer see the cart.
‫But then as we go back to the menu
‫and start adding our first pizza, then there it is.
‫And now as we move to our actual cart page,
‫we still have a problem.
‫So we still have this fake cart object right here
‫and we are not yet using the cart from the state.
‫And so let's fix that in the next video.