All language subtitles for 002 Redux & Side Effects (and Asynchronous Code)_en

Now let's start with

looking at asynchronous code

and side effects in general,

even if they should be synchronous,

even if the code should be synchronous, and Redux.

Because there is one super important rule.

Your reducer functions

must be pure,

side-effect free, and synchronous.

So your reducer functions should take some input

in the case of the Redux reducer,

the old state and the action,

and then produce some output.

And that's,

by the way not just the case for

Redux reducer function.

The reducer function you pass to use reducer,

is react hook,

works in the same way.

It has nothing to do with redux,

but it just general reducer concept

that you have a pure,

side effects synchronous function

that takes input and

produces some output.

And for the same input,

for the same values,

it will always produce the same output,

without any side effects that happen along the way

without any asynchronous code that blocks it.

No code of that kind must be part of your

reducer functions.

But of course, that brings up an important question

when working with redux,

when we dispatch some action

that would involve a side effect,

like HTTP request that should be sent,

where should we then put

the side effect code?

Where should we put our asynchronous code

when working with redux?

Because the reducer function

is clearly the wrong place

as we just learned.

The answer to this question is

that we have two possible places

where we can put our side effects.

We can put our side effects

possibly asynchronous code

directly into the component

with user fact for example,

so just as we did it before in this course,

and then we only dispatch an action

once that side effect is done

so Redux doesn't know anything about that side effect,

or, and

that will be new

we write our own action creator functions,

so we don't use the automatically generated ones

redux toolkit gives us

but instead we write our own action creators.

And it turns out that

for those action creators

redux actually has a solution

that allows us to

perform side effects

and run asynchronous tasks as part of this action creators

without changing the reducer function

because that function must stay side effect free.

Now we are going to have a look at both

approaches in this course

section,

And

to have a look at that,

We are going to start

by setting up another

React-Redux application.

We are going to do that in the next

two lectures and you can therefore

skip those two lectures

if you don't wanna repeat

what you learnt in the last course section,

though I of course recommend that you don't.

But we are going to repeat that

build a basic react-redux application

in the next two lectures

and there after we're going to

explore asynchronous code

and redux

and all this shiny new things.