Original subtitles

So what is Redux?

Redux is a state management system for a cross-component

or app-wide state.

So it helps us manage state, data that changes

and affects our application

and what we display on the screen.

It helps us manage such data across multiple components

or even the complete app.

Now just to make sure that we're all on the same page

we did of course use state a lot in this course already

with the use state hook or also with use reducer.

And indeed those hooks exist to allow us to manage data

that typically changes for example,

when the user clicks a button and we're changes to that data

then typically lead to the UI being updated.

We use React's State Management Hooks like use state

so that we can tell React that some data changed

and so that it then updates the UI for us.

That's what we did through out this course.

And that is what state is all about.

But we can split the definition of state

into three main kinds of state.

We have a local state and we also have cross-component

and app-wide state.

Now these are not hard definitions

these are just definitions which you will see a lot

or these are separations of state which you see a lot

and therefore I also like to use them.

Now what is a local state?

Local state is state so data which changes that affects DUI

which belongs to a single component.

And for example, if we listen to a user input

and we use useState to store that input

with every keystroke in a state variable.

Or we have a button that toggles some detailed field.

So if we click that button we show the details

if we click it again we hide them.

That would be local state.

And typically we manage such local state

inside of a component with useState

or if it's more complex maybe with useReducer.

Now we also often have state that affects not

just one component but multiple components.

That would be cross component state.

For example, if we have a button that opens

or closes a modal overlay such a modal component

might affect multiple components

and the trigger for opening the modal is per definition

not inside of the modal.

On the apprehend the modal might be closed

by clicking a button which is inside of that modal.

So then we have multiple components working together

to display and hide a modal.

And we can also implement that with useState

or useReducer we then just need to pass props around

so we need to build those prop chains

or do this prop drilling as it's also called

where we pass drops across multiple components

where we also might pass functions as props

across multiple components

so that these different components can work together

and manage state together.

And that's not bad or anything like that

it's just a little bit more complex than local state.

And sometimes we also have State

that does not just affect multiple components

but basically all components of an application.

Now when that happens we could call this app-wide state

and an example here would be user authentication.

If I log in we might need to change the navigation bar

because we now show new options

and we also certainly affect a lot of other components

which now show more or less data.

So that would be an example for app-wide state.

And we can also manage this with the useState, useReducer

and then by passing state values

and updating functions around full props.

That's what we did through out this course

and the data of course works.

Now for cross-component and app-wide state

passing around data and updating function fruit props

can become cumbersome though.

And that's why we did learn about React Context

before in the course.

React Context is a built in feature in React

that makes managing cross-component

or application wide state easier.

So that's one way of simplifying cross-component

and app-wide state management.

Redux solves the same problem.

So both React Context and Redux are there to help us manage

such cross-component or app-wide States.

And that of course brings up an important question.

Why do we need Redux if we already have React Context

for managing state that affects multiple components?