Beautiful, once we have connected our nav bar to your store using the Connect method, I think we're
ready to do exactly the same with our cart container, because at the moment, the way we're displaying
our items is because I have the cart prop on the cart container and that is set equal to my card items.
So the array that is coming from cart items.
Ejaz, but instead I would want to connect my cart container to my Redbox store, where I also have
the card items, of course.
But then more importantly, I would also want to have access to a total, which at the moment of course
is hardcoded, has zero, and then dispatch method, which will allow me to clear out my card.
So first I would want to remove this prop.
I don't want this anymore since I don't want you to think that I'm cheating.
So first I'm going to delete it.
And of course, as you can see right now, while my bag is empty, since I'm not displaying my card,
then I'm going to change my total.
Just so again, we have some kind of value that is different than zero because that's just going to
make it easier for us to see that we're accessing the correct value.
I'm going to save my apgar's, then I'm going to open up my sidebar, then look for card container and
the setup is going to be pretty much the same.
Again, we need to look for connect.
That is step number one from REACT Redux.
Then down in the bottom, I'm looking for my card container and I would want to invoke my connect first,
then wrap my card container and the same spiel.
I have access to my map state props function, so I'm going to go with a map state to perhaps just to
make things interesting.
I'm not going to go with our function, which is going to go with good old function.
Just so you don't think that we always need to use the arrow functions and then saying, do we have
our parameter?
And I don't know in this case I'm going to call the store just certain things that we always need to
call this a state.
And then same spiel.
We do need to return our object here.
In this case, I'm looking for two things.
I'm looking for my card, which essentially will be my items since I can remember the functionality
was following where card container will look for card.
Now, of course I can rename my prop.
It doesn't have to be card, but it makes sense.
If I already have all the functionality for the card, I just need to set up that prop equal to my card
items.
So that's number one.
And then the second one, I'm looking for my title.
So those are the two things that I'm looking for.
Now, if you want to one more time see the store value, then of course you can log it.
But in my case, since we already did that in no, I'm assuming that we already remember and then what
values I would want to return.
Well, there's going to be two, perhaps one will be card and the second one will be total.
Propp And what are going to be the values for my two props?
Will I have access to the store?
And then in the store, card value was equal to card.
Correct?
If we double check up, of course that is my value card and then total was exactly the same.
So I can go here and I can say store and then total.
Now, as a side note, of course, as you are using the six, we could have done this way where we just
the structure, both of these values.
So I'm looking for the correct value, then I'm looking for the total from my store or state.
However, you would call your parameter here.
And then in the six, we can just use the shortcut where I have the card.
And I have the total, so you also could have written this this way, so now we have both of these things
and check it out right away.
All the functionality works again, because in the card container, I'm looking for the card prop.
As long as you named your prop here exactly the same, the card, everything will work.
And the second thing that I can look for is, of course, my total and I'm still going to leave my default
empty array value just because I'm checking for card length.
And I would always want my card to be at least empty.
All right.
Otherwise, if it's not going to be empty array, well, there will be another.
So I'm going to go with card then.
I, of course have the default value and then I'm also looking for a little prop.
Now, as far as the card value, we are iterating over our array and line for each and every item.
We're displaying our car item where we pass in the values, the titles, the prices, the photo and
all that.
And then of course, I would want to do the same thing for my total so I can see that I have my total
text and then instead of hardcoded 00, I'm going to go for my total prop and then down at the bottom,
I should have one on five.
Why do I have one of five?
Because that is the property in my store with a value of one of five.
And now successfully we have connected not only the number but also our cart container to our redox
store.