Instructor: 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.