1
00:00:00,370 --> 00:00:05,290
So now what I want to do is show the number of items in our cart in the header.

2
00:00:05,290 --> 00:00:11,020
And this is really important because I'm going to show you how you can select anything you want from

3
00:00:11,020 --> 00:00:12,330
your global state.

4
00:00:12,340 --> 00:00:12,640
Okay?

5
00:00:12,640 --> 00:00:20,020
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

6
00:00:20,020 --> 00:00:27,310
from React Redux called Use Selector, just like we have use dispatch from React Redux, which is used

7
00:00:27,310 --> 00:00:31,000
to dispatch an action such as Add to Cart, which we just did.

8
00:00:31,000 --> 00:00:36,400
You can also use use selector if you just need to select something from the state.

9
00:00:36,400 --> 00:00:40,810
So let's go to our header and we're going to import.

10
00:00:42,170 --> 00:00:46,010
Let's say import use selector.

11
00:00:47,580 --> 00:00:48,990
Selector.

12
00:00:49,320 --> 00:00:52,350
And that's going to be from.

13
00:00:54,660 --> 00:00:56,880
React Dash Redux.

14
00:00:56,880 --> 00:00:59,430
I don't know why that didn't pop up automatically.

15
00:00:59,430 --> 00:01:00,660
Did I spell it right?

16
00:01:01,260 --> 00:01:03,080
So use selector.

17
00:01:03,090 --> 00:01:08,160
And then the way that we do this is we'll go right into our component.

18
00:01:09,190 --> 00:01:11,700
And we're going to destructure.

19
00:01:11,710 --> 00:01:18,190
So basically you can destructure what you want from the state by using use selector and then passing

20
00:01:18,190 --> 00:01:21,700
in a function that takes in your state.

21
00:01:22,700 --> 00:01:25,120
And then what part of the state you want?

22
00:01:25,130 --> 00:01:27,320
In our case, it's going to be state car.

23
00:01:28,640 --> 00:01:35,790
Okay, Now, this this is coming from if we look at our store, where is our store?

24
00:01:35,810 --> 00:01:39,230
So if we look at our store, we called this cart.

25
00:01:39,230 --> 00:01:39,710
Right.

26
00:01:39,710 --> 00:01:43,430
And that we have that set to our cart slice reducer.

27
00:01:43,430 --> 00:01:47,000
So whatever you call this, you can access here.

28
00:01:47,000 --> 00:01:48,890
So we're getting state dot cart.

29
00:01:49,040 --> 00:01:53,810
And as far as what we can access, it can be anything in our state.

30
00:01:53,810 --> 00:02:03,620
So in our cart slice, we have, for instance, state cart items, we have state dot, it's in this

31
00:02:03,620 --> 00:02:09,889
update cart, but we have the the price item prices, shipping price, all that.

32
00:02:09,889 --> 00:02:15,290
So any of that stuff we can get now I want to get the items so cart items.

33
00:02:15,950 --> 00:02:21,500
And let's just do a console log here for now and why that's not working.

34
00:02:23,020 --> 00:02:28,150
So console log of cart items just to see if that's working.

35
00:02:28,150 --> 00:02:32,470
So if we come back over, it doesn't matter what page you're on as long as the head is there.

36
00:02:32,860 --> 00:02:40,870
And then if we go to our console, you can see that the iPhone is in there because that's that's actually

37
00:02:40,870 --> 00:02:41,590
in our cart.

38
00:02:43,500 --> 00:02:43,920
All right.

39
00:02:43,920 --> 00:02:51,470
So now that we know we can get the cart items, we can work on showing the number of items.

40
00:02:51,480 --> 00:02:53,070
So let's go.

41
00:02:54,780 --> 00:02:55,380
Let's see.

42
00:02:55,380 --> 00:02:59,280
We're going to find right here where we have the cart, right?

43
00:02:59,280 --> 00:03:01,680
We have the icon and then cart.

44
00:03:02,220 --> 00:03:04,980
So I want to put this right above.

45
00:03:05,590 --> 00:03:11,890
The ending NAV links right here and we're going to open up some curly braces.

46
00:03:12,160 --> 00:03:14,830
So let's say cart items.

47
00:03:15,520 --> 00:03:21,820
And we want to say if the length is greater than zero, because obviously we don't want to show this

48
00:03:21,850 --> 00:03:23,710
if there's nothing in the car.

49
00:03:23,920 --> 00:03:28,150
So if the length is greater than zero, then I actually want to show a badge.

50
00:03:28,150 --> 00:03:30,340
And a badge is from React.

51
00:03:30,460 --> 00:03:31,600
React Bootstrap.

52
00:03:31,600 --> 00:03:33,010
So we're going to bring it up here.

53
00:03:33,010 --> 00:03:33,940
Badge.

54
00:03:35,040 --> 00:03:37,770
Which is just like a rounded background.

55
00:03:38,220 --> 00:03:40,800
So we're going to show badge.

56
00:03:42,670 --> 00:03:50,260
And let's see, we're going to pass in pill as an attribute because we want I think that has to do with

57
00:03:50,260 --> 00:03:51,760
like the roundness of it.

58
00:03:52,430 --> 00:03:54,070
And then the background.

59
00:03:54,080 --> 00:03:57,860
So you can use like danger success info.

60
00:03:57,890 --> 00:04:02,090
I'm going to use success, which is green by default.

61
00:04:02,480 --> 00:04:05,360
And then I also want to just have a little bit of margin on the left.

62
00:04:05,360 --> 00:04:11,570
So I'll just throw a style in here and we'll say margin margin left.

63
00:04:11,600 --> 00:04:14,600
Set that to, let's say five pixels.

64
00:04:15,590 --> 00:04:18,740
And then remember, we have the cart items array.

65
00:04:18,740 --> 00:04:25,910
So to get the number of items we can use, reduce on on that cart items array.

66
00:04:25,910 --> 00:04:35,930
So let's say cart items dot reduce and we're going to pass in an arrow function and we'll just say we

67
00:04:35,930 --> 00:04:41,150
need the accumulator, we'll just say A and then C for for the current.

68
00:04:41,910 --> 00:04:49,560
Item and let's say a so the accumulator plus the current item.

69
00:04:49,560 --> 00:04:53,630
But we, we want the, the quantity, right?

70
00:04:53,640 --> 00:05:01,260
So Qty because even if you have two of the same item, I still want that to be I still want it to say

71
00:05:01,290 --> 00:05:02,010
two.

72
00:05:02,600 --> 00:05:07,040
And then finally we just pass in a zero as the default for the accumulator.

73
00:05:07,850 --> 00:05:08,870
And that should do it.

74
00:05:08,870 --> 00:05:10,070
So let's save.

75
00:05:10,070 --> 00:05:11,000
And there we go.

76
00:05:11,000 --> 00:05:12,110
We get one.

77
00:05:12,410 --> 00:05:19,370
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

78
00:05:19,370 --> 00:05:21,290
take me to this page, which is fine.

79
00:05:21,290 --> 00:05:24,530
I'm just going to go back and I don't even have to reload.

80
00:05:24,530 --> 00:05:27,770
You can see that now we have three items in our cart.

81
00:05:29,150 --> 00:05:29,450
All right.

82
00:05:29,450 --> 00:05:33,140
And that would be the iPhone and then two of these headphones.

83
00:05:34,020 --> 00:05:35,460
If I clear my cart.

84
00:05:35,460 --> 00:05:35,730
Right.

85
00:05:35,760 --> 00:05:37,170
So if I go to.

86
00:05:37,830 --> 00:05:42,930
So obviously we can't do this through the through the app yet, but we can do it through the application

87
00:05:42,930 --> 00:05:43,760
tab.

88
00:05:43,770 --> 00:05:47,840
And then let's clear our local storage reload.

89
00:05:47,850 --> 00:05:51,180
And now there's nothing in our cart and nothing shows here.

90
00:05:52,320 --> 00:05:52,680
Okay.

91
00:05:52,680 --> 00:05:58,380
So in the next video, we're finally going to get to the the cart screen where it shows a summary of

92
00:05:58,380 --> 00:06:00,420
our items and all that good stuff.