All language subtitles for 005 Redux & Async Code_en

So now that we repeated

these core Redux basics again,

let's dive into some brand new content.

And let's see how we can connect Redux

with side effects and asynchronous code.

Now for this, I'll continue using this basic application

on which we worked, but now I wanna add a backend,

a server to which we can send our cart.

Because my idea is that whenever I edit the cart,

because we add items or we reduce the quantity

or remove items, whenever that happens

I wanna send the request to a backend server

to store that updated cart on the backend

so that when we reload this front-end application,

we can fetch that saved cart from the server,

load it and display it here.

That is my goal.

Now for that as a backend,

I will again use Firebase because it's the easy to use,

no backend code required backend,

which simply, well makes our life

as a developer a bit easier.

Of course, if you are a Node.js developer,

you could also build your own backend API

and send requests to that.

But that's simply not the focus of this course,

Node.js is a totally different topic.

I got a dedicated course in this,

this course is about react and start.

So we will focus on that.

So therefore I'm back on Firebase

using that Firebase project I created earlier in the course.

And there I have that time database

where some data is already being stored

from an earlier course section.

Now I'm going to get rid of all that data

because we don't need it here.

And instead, now I'll use this backend here

for my requests for this application.

And now we've got a couple of different kinds of requests

that should be sent to that backend.

As I said, whenever the cart changes,

I wanna update it on the backend.

So whenever I add or remove items to or from the cart,

I wanna update that backend.

And when I reloaded the application,

I wanna fetch my stored data from the backend.

Because currently, if we add something to the cart,

if we edit our cart, once I reload all that data is lost.

Because currently we're not storing that cart anywhere.

And that's exactly the kind of problem I wanna solve

by storing it on that Firebase backend.

But how do we now integrate that backend

and the http requests that we need to send to that backend

into our react application that uses Redux?

How do we do that?

Now keep in mind,

reducers must be pure, side-effect free, and synchronous.

So when we have any code that produces a side effect

or is asynchronous like sending an http request,

such code must not go into our reducer functions.

So we can't send our http request

inside of the reducers in our cart slides

after we edited our state here.

We can't go to the end of the reducer

and then use the fetch API

and send the request to the backend.

This would totally be against the idea of Redux.

It would be super bad

and you must never do something like this.

Don't perform a side effect inside of your reducer.

No matter if it's synchronous or asynchronous,

don't do it inside of the reducer.

And never run any asynchronous code

in the reducer in general.

So we can send the http request here

after we're done updating our state.

Instead, when it comes to running such code,

we have two main options where to put such code.

We can execute it in the components,

so we can simply ignore Redux if you wanna call it like this

or we create something which is called the action creator

which we only used indirectly thus far

which also would allow us to run asynchronous code

or generally any side effect code.

These are our two main options.

Now I wanna show you both options

so that you see the differences

and can make your own choice which option you prefer.