Once the user clicks on a remove button, we are dispatching our of action, so now we just need to
take care of the functionality or let's think about it so we remove functionality.
Wouldn't we need some kind of info of which item are we removing?
If I ask you a question, most likely the answer is yes.
Now, let's take a look at the crimes.
And I can see that each of them has this ID Suadi one and two and then ID three.
Now, if I check in the card ihram, am I passing in the.
I have the image, I have the title price and amount and then of course my remove so I'm not passing
in the ID, so how would I be able to pass my ID to my producer.
So that way of course in the user I would know which item on removing because regardless of what functionality
you pick, you will need that specific I.D. to remove that item and the way it works in Redox we have
something called payload.
So let me switch back to a cart item, then let me scroll down and maybe close the sidebar as well.
And let's take a look at the dispatch.
So we have our dispatch and we know that we must, must, must, must have a type when we are dispatching
an action.
Correct.
But we also can add more value here now if the type is necessary.
So you can have dispatch and action without the time you can add whatever values you would like over
here.
However, in general, the common practice is calling this payload.
Now, first of all, let me just show you how we would pass it and how we would check that introducer,
some kind of random value, and then we'll use a actual payload.
So in my case, I'm just going to add a comma since it is an object and then my key will be just some
kind of idea.
Now I'm going to go with idea of one and let's just double check in our juicer whether we have access
to it.
So I will head to my producer.
Then I have the action.
So what was the key?
What was the name of Michy?
The actual key, was it correct?
So let's see whether we have access to it if we check for ammo.
So I'm going to go with console log online.
Instead of this, you remove amount, which doesn't make sense at all.
So I guess I apologize for that.
I'm going to try to access action and then ID, so let's go with action that it matters, of course,
our name.
And then if we click now on a console, I'm getting this hard coded value for all of them.
Of course it is one because I hardcoded one, but that is already a success.
So I know I can access this ID property, like I said, a common practice using a payload key and then
set this up as an object and how that looks like in the card item instead of this ID.
I would go with payload, then set it equal to an object, and then in fact we pass in whatever values
you would want.
Again, I will name my I.D., but you can name it whatever you want.
Now, another question you probably have is this one.
OK, so how we can pass this individual value, the one that we have specific for the actual item.
Remember, each and every item have the ID and all of them have unique I.D., not just one.
So how we can get it is the one we used map dispatched.
Perhaps we have a second parameter and second parameter is own props.
So whatever props are being passed in the component and if I would want to access it, I just type comma
and then own props.
As I always remember.
It is a primer.
So you can call this Bakan.
Doesn't really matter.
You'll still have access to all the problems that are being passed in a component.
And in order to show how it looks like, I'm going to go with console log and then let's take a look
at our second primer.
So once we cancel, log it.
First of all, I have to complain because I passed in the ID and I didn't set any kind of value.
So for the time being, again, let's set it to one so we don't have this nasty error.
But then if I'm checking here, going can see that for each and every card item, I have the unique
values here.
So I have the title price amount.
And for all of them, of course, it just matches whatever I have in the car items.
Now just to showcase where are we getting this?
Of course, in the card container when we're mapping over our cart array, I have the card item I said
is equal to an item ID and then I use the spread operator again to get all the properties that are in
the item.
That's why we're pretty much processing everything.
So now in the card item, once I have access to my own props, what I can do well, I can just the structure
of the ID and pass it in my payload.
Correct.
So let's do consed then.
I'm going to be looking for.
Any idea of course will be a key in this object.
So let's write on prompts and then let's set ID equal to ID.
So again we can do the long way ID equals to ID or with ESX is the key name is equal to a value name
that we're passing.
I can just have a shortcut and now I'm passing in my Miraldi So now if I pop over to my reducer and
change from action ID to action payload ID because of course there is no more ID property on the action
object because we renamed it the payload and then place the ID in the payload.
Now in register I can just say action payload and then that ID, let's say that.
And now if I click on remove notice this is number one, number two and number three.
And now that we have all the setup, of course now we just need to come up with a functionality.
So if the action type is equal to remove what we would want to do, well, we'll start by again returning
a new object.
DataDot then copy the values from the old state and then comma.
And of course, we will set up some kind of new value for our card.
Now, I do need to add or return here, otherwise I will have an error and I'm going to set equal card.
And now since filter method on the array returns Ainura, I can just say card is equal and then state
card.
So I'm looking for the old card in the state or the old state card, whatever you want, and then use
the filter method on it.
So you know that for the filter we will iterate over array and then we will call the callback function
against each and every item in order.
And I simply would want to check if the item ID matches to whatever I passed here as a payload and of
course that item will be removed.
So I'm going to say if the individual item, if it matches, then it will not be returned in my new.
All right.
So we have the callback function and then in the callback function, the parameter represents that particular
item in the era.
And since it is a parameter, we can call it whatever we would want, but we just set up my callback
function first and then let's right here card item that will be name of my parameter.
And I only would want to return the item if the item ID does not match the payload ID that I'm passing
from the correct item.
And since I it's going to be a one liner, might as well can actually skip the curly braces.
And I'm just going to say cart item I d there's not much actual ID that I'm passing.
And remember the property was actually.
And then payload, since we set up our own object and then we have the ID, so now of course, let's
say that and we'll see that the moment I click on it, I'm removing the item and the second one, then
a third one.
Of course, we can repeat this as many times you would want this time maybe from the back.
So last one, last one.
And the last one is removed.
That's how we can set up remove functionality in our application.