Original subtitles

Now one possible,

better solution is actually totally obvious

once you see it.

Instead of using this approach,

which I implemented in the last lecture

and which I'll therefore now get rid of,

instead of doing that,

and hence I can get rid of this cart selector

and of the useSelector import.

Instead of doing that

we wanna stick to the approach from before.

We wanna dispatch the addItemToCart action

and do all this heavy work inside of the Reducer function.

But if we now wanna sync our new state to the server

so if we wanna update the server

with that new state

which we derived on the front end

we can simply switch the order.

We can first do the work on the front end

and let Redux update its store.

And then in a second step thereafter

we send the request to the server

but we don't necessarily need

to do that here inside of the Reducer function

where we wouldn't be allowed to do it.

Instead, we can, for example

do it in the ProductItem.js file

or in a totally different file.

Let's say in App.js

as our root component.

There we can simply get hold

of our overall cart

by basically using useSelector

and listening to changes to our cart state.

And whenever our cart state does change

we can send the Http request.

So that's what I'll do here.

I'll use useSelector,

which we're already importing

to get hold of my overall cart

and then I'll store it in that constant like this.

And now we can use useEffect

which we import from React

to watch for changes in our cart state,

because you learned

that useEffect allows you to run side effects.

So it sounds like a good choice here,

and it allows you to run an effect

whenever some dependency changes.

So we import useEffect from React

and we can then call useEffect here

in the app component, for example

and we could be doing this in any component.

I'm just picking my route component here

but that's not a must to do.

So here we then define our Effect function

and our array of dependencies.

Now, inside of the Effect function,

I wanna send a Http request with the Fetch API, let's say

and I wanna send it to Firebase.

So we grab that URL from Firebase,

add that here

and maybe target a cart.json node.

The .json is Firebase specific.

This will create a new cart Node in the database

and then store the data there.

And we wanna send a POST request

because that will tell Firebase to store new data

or to be precise,

actually here, I wanna send a PUT request.

That's also allowed by a Firebase.

And if we send a PUT request

we also do store data on Firebase.

But the difference to POST is

that the new data will not be added

in a list of data so to say,

but that it will override existing data.

So when sending a PUT request,

will override the existing cart

with the incoming data

and that's exactly what we want here.

So we can send a PUT request

and then set our request body to JSON.stringify

And now here, I wanna send my cart.

So this cart, which I get from Redux,

I convert this to JSON data

and send it as part of the request.

Now, since we're using cart in here

we should add it as a dependency to useEffect

so that this Effect function re-executes

whenever our cart changes,

which is exactly what we want.

Now, the great thing is

that useSelector sets up a subscription to Redux.

So whenever our Redux store does change

this component function will be re-executed

and we will get to the latest state.

So in this case, the latest cart.

So that means that effect will also be re-evaluated

and it will re-execute if our carts did change

and that is exactly what we need.

So with this simple addition here

we will send this Http request whenever our cart changes

and we can keep our logic for updating the cart

inside of the reducer,

because we simply switched the order.

We first update our Redux store

and we're done with that.

And then we select the updated store to send the request

and that allows us to keep lean components

create a fat Reducer with all the logic

and then perform any side effects

that might depend on our Redux state.

So if you save this

and we go back here,

if I reload

if I open up the network tab

so that we can see Http requests,

if I add something to my cart,

you see a Http request is sent

and that happens whenever I update my cart.

And if we go to Firebase,

we therefore see the cart's there.

And we see that here we have the correct cart reflected.

If I add my other item to the cart

and never request the send

and the cart was updated again.

So that is a very, very nice

and that's a very good way

of having our side effect logic in a component

and keeping all our data transformation logic

inside of a Reducer,

which is where we typically wanna have it

when working with Redux.