Once we have connected our components to a Redux store and we can display static data, let's switch
gears, make things a bit more interesting and start working on the functionality.
So I'm going to start with clear cut just because my button is in the car component anyway, so we might
as well keep on working here.
And I guess I said car component.
What I mean is cart container component, just to be more clear and the same one as far as reducing
the functionality will be very straight up where instead of having a cart, we will switch to a meteorite.
So essentially, once the user clicks on a car instead of setting equal to cart items, we will set
it equal to an empty.
All right.
Now, we'll start by getting the action, the clear court action, because that's the one we will use
in reducer.
And of course, once we dispatch the method, we need to use the same action.
Let me copy and paste my variable.
Then in the card container up on the top, I'm going to go with the import and copy and paste just so
I don't have any stupid bugs.
And then from now, our components is a separate folder.
So we need to go to levels up and look for actions in the source folder.
Let me save it.
And now the million dollar question.
How can we have access to our dispatch method?
And I remember I said that there is a second argument to connect.
So that would be one of the ways that will cover in the next video is when we start working with a single
item.
However, when we use my state props, we also have access to a dispatch method.
And since it is very cool, I want to show you first.
So let me switch to a bigger screen and let's look for the tools.
More specifically, react dev tools.
And you'll notice something interesting where we have the card container on the right hand side.
I can see the props, OK, and then the props.
I have our cart dispatch in total.
Now, cart and total makes sense, correct?
Because in the cart container we use maps that props and we mapped our store values to our props.
More specifically, the props were correct and total.
So those do make total sense.
What about this guy, though?
What about the dispatch?
I can see that I have this problem, by the way, you so I didn't set them up myself.
There is no where I wrote this page.
So this was done by maps that props and is equal to a dispatch function.
Now, do you want to make a wild guess?
What is this dispatch function doing?
And if you guessed that it is the same function stored in dispatch, you are exactly correct.
So what's cool about my state props?
Not only we can map our state values to our props, but also automatically we map our dispatch function
to a dispatch prop.
And what that simply means is that in the car container where I have the props right after the total,
I can write dispatch and now I have access to my dispatch method and where I would want to use that.
Well, I have my button, the clear cut button, and of course, we would want to set up on click.
So unclick what should happen since we are going to invoke our function, the dispatch one, we need
to make sure that we pass the arrow function because we would want to run clear cut once we click on
a button, not right away.
And then since we have access to our dispatch bypass dispatch and then remember, we needed to pass
our action.
So object with a property of type and then let's use our clear card, so clear cut variable, which
holds the clear cut string and we are good to go.
Now, of course we need to catch that introducer.
So I'm going to move to register again.
I do need to import my clear card and then I'm going to set up my IF statement.
So if action type, if action type is equal to clear card, what we would want to do.
Well, I guess we need to start by returning a object, correct.
A new object.
Then we would want to copy all the values from the old state.
So that's why we're using and the spread operator, we're copying the properties and then we would want
to override the court one.
And as far as the court, I'm just going to go with court.
And then since I'm clearing the court, the only thing we need to do is set it equal to an empty array,
let's say it.
And then if everything has been set up correctly, once we press on clear court, we should see is currently
empty.
So your back is currently empty.
Why is that happening?
Well, because in my car container, I'm checking if the car trailing is equal to zero, which of course
is the case.
Once we delete all our items, then I'm just displaying is currently empty.
And of course we can do it multiple times where once I refresh again, I get my array with the items.
But since I added my dispatch method, now each and every time my user will click on Clearcut, the
user will clear all the items from the card.