State management can be very complex, react is great at reacting to state changes and updating the UI accordingly
but managing that state can get very difficult as our application grows.
Of course react gives us the built-in state property which we use thus far but we could already see in
our burger builder project that passing the ingredients from component A to component B can be very difficult
and we had to use routing query parameters for that,
certainly a workaround but not a very elegant one.
So state management should be easier,
the example from the burger builder is a classical example, nothing special. Consider this application
which is not the one we built,
It's an app with the root app component and then a user is in a products container and some subcomponents.
Now let's say we have authentication added to this application, so users can sign up and sign in, to access
the dashboard in the users area, we need to check if the user is signed in and only grant access if
that resolves to a true.
Now checking that isn't too difficult because we're probably managing the authentication status in
the auth component over there.
The problem now is what if we all need that information in a totally different area of our app like
in the burger builder where we need ingredients in a totally different area of the app in a checkout. If
we need information there, we somehow have to create a connection between the aut component and our card
component here.
Well that is super complex and a very long chain of props or query params or however we manage
to pass data around.
It's a pity that it is this difficult because in the end, we're writing javascript right and we're having
a bundled javascript file as output or a couple of bundles
if we're using lazy loading.
So in the end, why can't we just set some global variable which is a javascript object which stores our
entire application state and which we can access from anywhere,
why do we have to take the complicated route with query parameters
if all we do is just use javascript in the end? The reason is that react's reactivity system doesn't react
to changes in some global variable you defined
and it's good that it doesn't,
that makes it so efficient.
However, having this global store still sounds very interesting and that's exactly what redux is about
as you will learn.
So let's take a closer look at redux before we then implement it to see how it works in action.