All language subtitles for 013 Finalizing the Fetching Logic_en

As always in programming,

there will be multiple ways of fixing that issue

we detected in the last lecture,

where we automatically resent the cart,

when the application loaded.

One possible solution, could be to go to

our cart-slice and here in that initial state,

we, for example, add a changed property,

which is false, let's say.

And we don't change this if we replaced a cart,

but we do change it if we add or remove items,

to or from the cart.

Then we set state.changed to true.

And removeItemFromcart and addItemToCart,

are only executed from our local application.

So, when we fetch data from Firebase,

where we then execute replaceCart,

this will not change.

It will stay false. Now, how can this help us?

Well in App.js, where we have this effect

for sending CartData, we can also check

if cart changed.

So if our cart, which we're selecting here,

if that changed property, is true

and only if it's true, we wanna dispatch

and send the CartData.

If it's false, so if it hasn't changed locally,

we don't wanna send it.

With this simple change implemented,

if we reload, we're not sending this again.

Only if I add something to the cart.

Now, as a side note, this changed property

is now all the part of Firebase,

because we're sending the overall cart state,

as it's stored by Redux to Firebase.

If we would wanna avoid this, we could of course,

go to the cart-actions and there,

where we send our cart data, instead of taking

the whole cart, we could create

a new objects, where we then just use

items from cart items and just

the totalQuantity from cart.totalQuantity.

So we would create a new object,

which does not contain changed.

That's something we could do.

And with that, it is removed, if we send something.

Now it's no longer part of Firebase.

So now, that should be working as we want.

Now we can add items to the cart,

change our cart, however we need to,

add more and less.

And that is then synced to Firebase.

Though I see that the price here

doesn't update correctly.

We should look into this.

But that's now synced to Firebase.

And they offer this now works.

At least when it comes to the side effects

and to HTTP requests, we are of course

also loading data correctly.

I just detected that we have a issue

regarding the price, that does not update correctly

if I reduce my cart quantity.

So let's quickly look into that here,

in cart-slice and removeItemFromCart.

Yeah, for existing items, I am reducing the quantity,

but I'm not updating the price.

We should of course be doing that.

I'll set totalPrice equal to existingItem.totalPrice,

not totalQuantity, thank you, totalPrice,

minus existingItem.price.

To reduce the total price, by the price

of a single item, since we're removing

a single item.

If we do that and I reload

and I clear my cart, to start from scratch again,

if you do that and I try to start editing again,

we get another error and that actually

is an expected error, which I wanted to dive in.

We're getting this error because

I cleared my cart entirely and I reloaded

and therefore I fetched my cart data from Firebase.

Since I cleared the cart entirely though,

we see that on Firebase here,

we have no items key in the cart anymore.

So we fetched that data from Firebase

and we set our local carts to the fetched cart.

And that means that items is now not an empty array,

but undefined and therefore trying

to call find on undefined, fails.

To solve this, we should go to cart-actions

and to the place where we fetch our cart.

And then, when we replace our cart with cartData,

there indeed is a tiny transformation we should make.

We should make sure, that the payload we pass

to replaceCart, is a object which always has

a items key, which is either cartsData.items,

or if that should be undefined and therefore

a falsy and empty array.

And total quantity is always cartData.totalQuantity,

because that still is part of Firebase.

With that, we ensure that we never end up

with items being undefined.

Instead, it will always be an empty array.

With that, if we reload, we can add to the cart again

and now we can also deduct items from the cart.

And now the price updates correctly.

Can reload again.

And this now all works.

And now we also implemented HTTP,

in side effects with Redux.

And you learned about different approaches

of doing that.