All language subtitles for 004 How Redux Works_en

So now that we know what Redux is,

basically an alternative to react context,

and now that we also know why we might wanna use it,

over react context in some apps,

the big question that remains,

is how does Redux work.

Well, Redux is all

about having one Central Data Store,

in your application.

And with data I mean state.

And that is super important.

You have exactly one store.

You never have more than one store.

It's one store,

for all your state for your entire application.

So in this store,

you would store authentication state theming,

maybe some user input state you wanna save,

whatever it is.

Whichever cross component or app wide state you have,

it goes into this one store.

Now this might sound unmaintainable,

but the good thing is

that we don't directly need to manage,

the entire store all the time.

As you will see from this module and the next modules.

So we have this Central Data Store.

What do we do with it?

Ultimately, we have data in that store,

so that we can use it from inside our components.

Because if some data there changes,

if the authentication status of a user changes

for example, we wanna know about that in a component,

so that we can react accordingly,

and update the UI.

For this components set up subscriptions,

to our Central Store.

They subscribe to the store,

and whenever the data changes,

the store notifies components,

and then components can get the data they need,

for example the current authentication status,

so they get a slice of the Redux store,

and they can then use it.

And of course we're going to see all of that,

in action, in detail, in this course.

So that's how we get data out of the store.

But of course,

since this is state,

so data which also changes from time to time.

We need a way of changing that data.

So how do we change data into stored in?

Here's one very important rule.

Components, never important.

Never, directly manipulate the store data.

So we have that subscription,

but we don't have a data flow in the other direction.

At least not a direct data flow.

Components don't directly manipulate that data in the store.

Instead for debt, we use a concept called reducers.

We have a reducer function.

This reducer function which we have to set up.

This function is responsible, for mutating.

So for changing the store data.

Now One important note here,

the term reducer,

is of course something we have heard before,

with use reducer and the reducer function here is not

that use reducer hook we learned about.

Reducer functions in general, are just a general concept.

Reducer functions are functions, which takes some input,

and then transform that input,

they reduce it,

for example they can reduce a list of numbers to the sum

of that number and that's just one example.

But they in general transform, inputs

and spit out a new output a new result.

So that's a general programming concept,

which use reducer, does hook uses

and which this reducer function Redux will use also uses.

Okay so we have a reducer function,

which is responsible for updating the store data.

And we have components that subscribe to that data.

How do we now connect components and that reducer function?

Because ultimately,

it will of course be the components

that should trigger a data change.

It is for example a click on a button in a component

that should trigger some data change.

So how do we connect that.

Trigger is a good word for that.

Because we have a third concept here.

We have actions and components dispatch actions.

And therefore we could also say

that components trigger, certain actions.

Now an action is really just a simple JavaScript object,

which describes the kind of operation,

the reducers should perform.

Therefore, Redux then forwards actions to the reducer,

reads that description of the desired operation,

if you wanna to call it like this,

and then this operation is performed by the reducer.

So components dispatch actions,

which describe what should be done,

but don't do it directly,

then these actions are forwarded to the reducer,

the reducer then does what the action wants,

the reducer to do.

And then the reducer, spits out a new state,

which effectively will replace the existing state in

that Central Data Store.

And when that happens,

when that state in that data store is updated,

subscribing components are notified,

so that they can update their UI.

That's how Redux works.

Now of course that's all nice.

That's great theory.

But how does that look like in reality then.

How does the code we have to write look like?

Well that's what we're going to explore now.