All language subtitles for 017 Working on a More Complex Reducer Logic_en

Now, to change the logic

for adding cart items,

we need to head back to the CartProvider

and there to the cartReducer.

At the moment, items are always added

as new items in that array.

Now, that needs to change.

When we're adding a item, I always wanna calculate

my updatedTotalAmount like this first.

That is always correct

no matter if a item is already part of the cart or not.

But then, before I derive my updatedItems,

I instead wanna check

if a item is already part of the cart.

And for this, I'll create a existingCartItemIndex constant,

where I will reach out to my existing items in the cart

and where I call findIndex,

which is a built-in method in JavaScript

which finds the index of an item in an array.

Now, it takes a function which should return true

if that's the item we're looking for, and false otherwise,

because this function will be executed

for every item in the array.

And I wanna return true

if item.id is equal to action.item.id,

so if the item we're currently looking at in that array

has the same id as the item we're adding

with this action which was dispatched.

Now, this will then return us

the index of that item if it exists.

So what we can do now is we can get the existingCartItem

by reaching out to state.items

and accessing that existingCartItemIndex.

This will only work if we have that item already.

Otherwise, we'll try to access an item which doesn't exist,

and hence existingCartItem would be null.

If the item already is part of the array, though,

this item will be set to that item.

And now we can add an updatedItem variable

and an updatedItems variable,

which clashes with this constant, but we'll fix this soon.

And then we add another if check here

where we check if existingCartItem is a thing,

if this is truthy, which will only be the case

if it's already part of the array.

In this case, the updatedItem

will be set equal to a new object

where I copy the existingCartItem

but where I update the amount

because the amount now needs to change.

If sushi was already part of the cart

and we added two more sushis,

then, of course, we need to update the amount

of that existing sushi which is part of the cart.

So here I then access

existingCartItem.amount + action.item.amount,

so the amount which was added by this action.

And updatedItems is now equal to a new array

where I copy the existing items

so that I update this immutably

without editing the old array in memory,

hence I'm creating a new array where I copy the old objects.

And then for that existingCartItemIndex,

I overwrite this with the updatedItem.

So I pick the old item,

which we identified in the cart items array,

and I overwrite it with this updatedItem.

Now, that's what I do

if a item is already part of the cart items array.

Now, we also have the else case

that a item is added for the first time

to that cart items array.

In that case,

the updatedItem is simply a brand new item

where I copy my action.item,

and now updatedItems

is simply set to state.items.concat,

and then here I add this updatedItem.

Or we keep this simpler and we keep on adding action.item,

we don't set updatedItem here and remove updatedItem

in here, therefore, and create this on the fly as a constant

because now we only use updatedItem

in that first part of the if block.

And our else block is very lean now.

With that, we set updatedItems to different things

depending on whether the item is already part

of the array or not.

And either way, we then return our new state snapshot

which picks up these updatedItems.

I hope this logic makes sense.

And with that, if we now reload, I can add sushi,

and if I add it multiple times,

and if I add four sushi at once,

you see we only have one entry here

with the appropriate amount,

and that's exactly what I want.

Now, if I add a second item,

this is added as a new entry, of course,

because it's a different item.

But then, again, if I add more items of that,

it just increases the counter.

So, that is working.

Now, let's make sure that the plus and minus buttons

here in the cart also work.

And for that, we also need to make sure

that we can remove items.