1
00:00:00,210 --> 00:00:07,130
Beautiful, once we have connected our nav bar to your store using the Connect method, I think we're

2
00:00:07,140 --> 00:00:14,310
ready to do exactly the same with our cart container, because at the moment, the way we're displaying

3
00:00:14,310 --> 00:00:21,600
our items is because I have the cart prop on the cart container and that is set equal to my card items.

4
00:00:21,930 --> 00:00:25,450
So the array that is coming from cart items.

5
00:00:25,450 --> 00:00:33,900
Ejaz, but instead I would want to connect my cart container to my Redbox store, where I also have

6
00:00:33,900 --> 00:00:35,190
the card items, of course.

7
00:00:35,550 --> 00:00:41,490
But then more importantly, I would also want to have access to a total, which at the moment of course

8
00:00:41,490 --> 00:00:48,810
is hardcoded, has zero, and then dispatch method, which will allow me to clear out my card.

9
00:00:49,170 --> 00:00:52,080
So first I would want to remove this prop.

10
00:00:52,350 --> 00:00:57,120
I don't want this anymore since I don't want you to think that I'm cheating.

11
00:00:57,360 --> 00:00:58,710
So first I'm going to delete it.

12
00:00:58,950 --> 00:01:05,340
And of course, as you can see right now, while my bag is empty, since I'm not displaying my card,

13
00:01:05,640 --> 00:01:07,440
then I'm going to change my total.

14
00:01:07,740 --> 00:01:13,440
Just so again, we have some kind of value that is different than zero because that's just going to

15
00:01:13,440 --> 00:01:16,880
make it easier for us to see that we're accessing the correct value.

16
00:01:17,300 --> 00:01:24,750
I'm going to save my apgar's, then I'm going to open up my sidebar, then look for card container and

17
00:01:24,750 --> 00:01:27,980
the setup is going to be pretty much the same.

18
00:01:28,230 --> 00:01:30,030
Again, we need to look for connect.

19
00:01:30,210 --> 00:01:33,570
That is step number one from REACT Redux.

20
00:01:33,930 --> 00:01:40,260
Then down in the bottom, I'm looking for my card container and I would want to invoke my connect first,

21
00:01:40,560 --> 00:01:44,370
then wrap my card container and the same spiel.

22
00:01:44,670 --> 00:01:54,390
I have access to my map state props function, so I'm going to go with a map state to perhaps just to

23
00:01:54,390 --> 00:01:55,380
make things interesting.

24
00:01:55,560 --> 00:01:59,460
I'm not going to go with our function, which is going to go with good old function.

25
00:01:59,850 --> 00:02:05,700
Just so you don't think that we always need to use the arrow functions and then saying, do we have

26
00:02:05,700 --> 00:02:06,360
our parameter?

27
00:02:06,630 --> 00:02:11,430
And I don't know in this case I'm going to call the store just certain things that we always need to

28
00:02:11,430 --> 00:02:12,780
call this a state.

29
00:02:13,170 --> 00:02:14,370
And then same spiel.

30
00:02:14,670 --> 00:02:17,310
We do need to return our object here.

31
00:02:17,310 --> 00:02:19,410
In this case, I'm looking for two things.

32
00:02:19,770 --> 00:02:26,370
I'm looking for my card, which essentially will be my items since I can remember the functionality

33
00:02:26,370 --> 00:02:31,470
was following where card container will look for card.

34
00:02:32,010 --> 00:02:33,930
Now, of course I can rename my prop.

35
00:02:34,290 --> 00:02:36,570
It doesn't have to be card, but it makes sense.

36
00:02:36,570 --> 00:02:42,390
If I already have all the functionality for the card, I just need to set up that prop equal to my card

37
00:02:42,390 --> 00:02:42,750
items.

38
00:02:43,110 --> 00:02:44,250
So that's number one.

39
00:02:44,550 --> 00:02:47,010
And then the second one, I'm looking for my title.

40
00:02:47,260 --> 00:02:49,650
So those are the two things that I'm looking for.

41
00:02:50,190 --> 00:02:55,230
Now, if you want to one more time see the store value, then of course you can log it.

42
00:02:55,260 --> 00:03:02,490
But in my case, since we already did that in no, I'm assuming that we already remember and then what

43
00:03:02,490 --> 00:03:03,740
values I would want to return.

44
00:03:03,990 --> 00:03:09,330
Well, there's going to be two, perhaps one will be card and the second one will be total.

45
00:03:09,340 --> 00:03:12,540
Propp And what are going to be the values for my two props?

46
00:03:12,870 --> 00:03:14,640
Will I have access to the store?

47
00:03:14,910 --> 00:03:18,810
And then in the store, card value was equal to card.

48
00:03:19,230 --> 00:03:19,740
Correct?

49
00:03:20,010 --> 00:03:27,090
If we double check up, of course that is my value card and then total was exactly the same.

50
00:03:27,420 --> 00:03:33,470
So I can go here and I can say store and then total.

51
00:03:33,840 --> 00:03:40,350
Now, as a side note, of course, as you are using the six, we could have done this way where we just

52
00:03:40,350 --> 00:03:41,850
the structure, both of these values.

53
00:03:42,090 --> 00:03:48,540
So I'm looking for the correct value, then I'm looking for the total from my store or state.

54
00:03:48,750 --> 00:03:51,330
However, you would call your parameter here.

55
00:03:51,600 --> 00:03:57,120
And then in the six, we can just use the shortcut where I have the card.

56
00:03:58,290 --> 00:04:04,830
And I have the total, so you also could have written this this way, so now we have both of these things

57
00:04:05,040 --> 00:04:07,130
and check it out right away.

58
00:04:07,470 --> 00:04:14,140
All the functionality works again, because in the card container, I'm looking for the card prop.

59
00:04:14,550 --> 00:04:20,270
As long as you named your prop here exactly the same, the card, everything will work.

60
00:04:20,520 --> 00:04:26,490
And the second thing that I can look for is, of course, my total and I'm still going to leave my default

61
00:04:26,490 --> 00:04:30,720
empty array value just because I'm checking for card length.

62
00:04:31,050 --> 00:04:36,140
And I would always want my card to be at least empty.

63
00:04:36,180 --> 00:04:36,570
All right.

64
00:04:36,840 --> 00:04:40,370
Otherwise, if it's not going to be empty array, well, there will be another.

65
00:04:40,650 --> 00:04:42,720
So I'm going to go with card then.

66
00:04:42,720 --> 00:04:46,570
I, of course have the default value and then I'm also looking for a little prop.

67
00:04:46,980 --> 00:04:53,700
Now, as far as the card value, we are iterating over our array and line for each and every item.

68
00:04:53,940 --> 00:05:01,380
We're displaying our car item where we pass in the values, the titles, the prices, the photo and

69
00:05:01,380 --> 00:05:01,980
all that.

70
00:05:02,280 --> 00:05:08,280
And then of course, I would want to do the same thing for my total so I can see that I have my total

71
00:05:08,280 --> 00:05:17,040
text and then instead of hardcoded 00, I'm going to go for my total prop and then down at the bottom,

72
00:05:17,310 --> 00:05:19,200
I should have one on five.

73
00:05:19,710 --> 00:05:21,090
Why do I have one of five?

74
00:05:21,450 --> 00:05:26,970
Because that is the property in my store with a value of one of five.

75
00:05:27,270 --> 00:05:35,280
And now successfully we have connected not only the number but also our cart container to our redox

76
00:05:35,280 --> 00:05:35,760
store.