Original subtitles

And let's start with running the async code,

the side effect inside of our components.

Let's maybe start with adding items to a card

from inside the product item component.

That means that in here we have this add to cart handler

and we could of course then not just dispatch an action

to our Redux store but we could also send

that data to Firebase to the backend.

We would just have one problem with that.

If we just send the product data to Firebase.

So the data which we're sending to Redux here

if we just sent that to Firebase,

we would just store that product data in Firebase,

but Firebase the way we are using it does not have any logic

on its own on the backend.

So on the Firebase backend we don't run any extra code.

So if we send some product data there

that product data would simply be added to the database

but all the logic we have in the reducer

for checking whether a product is already part of the cart

and if it is updating as quantity, if it's not adding it

that kind of logic simply does not run on Firebase,

because that's a pretty dumb backend here

the way we're using it

and therefore we don't have such logic there.

Now if you would be using Firebase for a real project

you could add server side code to it.

There is a service called functions

which allows you to add your own code

on the Firebase backend which can be triggered

for incoming requests and which would allow you

to transform data on the backend.

So it would be possible to integrate this here.

And if you're using your own backend built with Node.js

or PHP or whatever if you build your own backend API

then of course you're also totally free to add code

on that backend API that does more with the incoming data

than just store it in the database.

But since this is no course about backend API development

and about backend programming languages

that's not the route I will take here.

It's something you can do but it requires knowledge

about backend programming languages like Node.js or PHP.

And we don't have that here in this course.

Therefore it's important to recognize

that the code we need to write on the frontend

and where we write dead code will depend

on our backend code.

Because we of course have our backend API,

our backend server talking to our frontend application

with help of these http requests

and the responses which we send around.

Now if we would have a backend API that does a lot of work

so that does not just store incoming data

but also transform it.

If we had an API like this then our frontend application

could do less work.

It could just send data like data for a product

that should be added to a cart.

It could send that data to the backend,

lets the backend do the transformation

and then use the response on the frontend

to then just there hand it off to the reducer for example,

to store that response.

So then we could slim down our reducer

and basically just take the incoming data which is coming

from the backend and which was transformed there

so let's say the final card we could just take that

and store that in Redux that's something we could do then.

But that's not the scenario we have here

for the reasons mentioned a couple of seconds ago.

Instead here we have a backend that does not

do a lot of work.

It basically just stores incoming data in the format

It receives it in.

And that means that we do need to do more work

on the frontend.

There we don't just need to store data in the Redox store,

we also need to prepare that data.

We need to transform the data.

So exactly what we're doing here in add item to cart

and in remove item from cart.

We are not just getting the finished cart as a payload

on the action instead we get a product

and we need to find out how to add it to the cart

here in this code.

And the same for removing.

And that's no problem and it of course makes 100% sense

if we have no backend but if we do have a backend

it is at least something to be aware of

that depending on the backend

and the amount of work the backend does

we could do less work here

if the backend would do the work for us.

But as mentioned multiple times, that's not the case here

and therefore we will need to find a way

to still do the work here on the frontend

and at the same time then send

that transformed data to the backend

without doing that sending inside of the reducer

because we learned that we're not allowed to do it there.

So that's the problem set with which we have to work here.

And therefore let's now determine where to best put our code

for sending the updated card to the backend

if the backend is not doing that work for us

and we therefore have to do it here and at the same time

we're not allowed to send our requests inside

of the reducer function.