So now what I want to do is show the number of items in our cart in the header.
And this is really important because I'm going to show you how you can select anything you want from
your global state.
Okay?
And it doesn't matter which slice it is or what part of your state it is, and we can do it with a hook
from React Redux called Use Selector, just like we have use dispatch from React Redux, which is used
to dispatch an action such as Add to Cart, which we just did.
You can also use use selector if you just need to select something from the state.
So let's go to our header and we're going to import.
Let's say import use selector.
Selector.
And that's going to be from.
React Dash Redux.
I don't know why that didn't pop up automatically.
Did I spell it right?
So use selector.
And then the way that we do this is we'll go right into our component.
And we're going to destructure.
So basically you can destructure what you want from the state by using use selector and then passing
in a function that takes in your state.
And then what part of the state you want?
In our case, it's going to be state car.
Okay, Now, this this is coming from if we look at our store, where is our store?
So if we look at our store, we called this cart.
Right.
And that we have that set to our cart slice reducer.
So whatever you call this, you can access here.
So we're getting state dot cart.
And as far as what we can access, it can be anything in our state.
So in our cart slice, we have, for instance, state cart items, we have state dot, it's in this
update cart, but we have the the price item prices, shipping price, all that.
So any of that stuff we can get now I want to get the items so cart items.
And let's just do a console log here for now and why that's not working.
So console log of cart items just to see if that's working.
So if we come back over, it doesn't matter what page you're on as long as the head is there.
And then if we go to our console, you can see that the iPhone is in there because that's that's actually
in our cart.
All right.
So now that we know we can get the cart items, we can work on showing the number of items.
So let's go.
Let's see.
We're going to find right here where we have the cart, right?
We have the icon and then cart.
So I want to put this right above.
The ending NAV links right here and we're going to open up some curly braces.
So let's say cart items.
And we want to say if the length is greater than zero, because obviously we don't want to show this
if there's nothing in the car.
So if the length is greater than zero, then I actually want to show a badge.
And a badge is from React.
React Bootstrap.
So we're going to bring it up here.
Badge.
Which is just like a rounded background.
So we're going to show badge.
And let's see, we're going to pass in pill as an attribute because we want I think that has to do with
like the roundness of it.
And then the background.
So you can use like danger success info.
I'm going to use success, which is green by default.
And then I also want to just have a little bit of margin on the left.
So I'll just throw a style in here and we'll say margin margin left.
Set that to, let's say five pixels.
And then remember, we have the cart items array.
So to get the number of items we can use, reduce on on that cart items array.
So let's say cart items dot reduce and we're going to pass in an arrow function and we'll just say we
need the accumulator, we'll just say A and then C for for the current.
Item and let's say a so the accumulator plus the current item.
But we, we want the, the quantity, right?
So Qty because even if you have two of the same item, I still want that to be I still want it to say
two.
And then finally we just pass in a zero as the default for the accumulator.
And that should do it.
So let's save.
And there we go.
We get one.
If I go to the headphones and let's say I add in two here and click Add to Cart, now it's going to
take me to this page, which is fine.
I'm just going to go back and I don't even have to reload.
You can see that now we have three items in our cart.
All right.
And that would be the iPhone and then two of these headphones.
If I clear my cart.
Right.
So if I go to.
So obviously we can't do this through the through the app yet, but we can do it through the application
tab.
And then let's clear our local storage reload.
And now there's nothing in our cart and nothing shows here.
Okay.
So in the next video, we're finally going to get to the the cart screen where it shows a summary of
our items and all that good stuff.