1
00:00:02,150 --> 00:00:11,200
State management can be very complex, react is great at reacting to state changes and updating the UI accordingly

2
00:00:11,360 --> 00:00:16,450
but managing that state can get very difficult as our application grows.

3
00:00:16,490 --> 00:00:22,730
Of course react gives us the built-in state property which we use thus far but we could already see in

4
00:00:22,730 --> 00:00:29,750
our burger builder project that passing the ingredients from component A to component B can be very difficult

5
00:00:29,930 --> 00:00:33,230
and we had to use routing query parameters for that,

6
00:00:33,440 --> 00:00:36,840
certainly a workaround but not a very elegant one.

7
00:00:36,860 --> 00:00:39,750
So state management should be easier,

8
00:00:39,770 --> 00:00:45,980
the example from the burger builder is a classical example, nothing special. Consider this application

9
00:00:46,160 --> 00:00:47,870
which is not the one we built,

10
00:00:47,980 --> 00:00:54,090
It's an app with the root app component and then a user is in a products container and some subcomponents.

11
00:00:54,440 --> 00:01:00,890
Now let's say we have authentication added to this application, so users can sign up and sign in, to access

12
00:01:00,890 --> 00:01:06,800
the dashboard in the users area, we need to check if the user is signed in and only grant access if

13
00:01:06,800 --> 00:01:08,670
that resolves to a true.

14
00:01:08,930 --> 00:01:14,570
Now checking that isn't too difficult because we're probably managing the authentication status in

15
00:01:14,590 --> 00:01:16,540
the auth component over there.

16
00:01:16,550 --> 00:01:22,130
The problem now is what if we all need that information in a totally different area of our app like

17
00:01:22,130 --> 00:01:28,160
in the burger builder where we need ingredients in a totally different area of the app in a checkout. If

18
00:01:28,160 --> 00:01:34,670
we need information there, we somehow have to create a connection between the aut component and our card

19
00:01:34,700 --> 00:01:35,720
component here.

20
00:01:35,900 --> 00:01:42,260
Well that is super complex and a very long chain of props or query params or however we manage

21
00:01:42,260 --> 00:01:44,240
to pass data around.

22
00:01:44,300 --> 00:01:50,780
It's a pity that it is this difficult because in the end, we're writing javascript right and we're having

23
00:01:50,840 --> 00:01:54,830
a bundled javascript file as output or a couple of bundles

24
00:01:54,830 --> 00:01:56,300
if we're using lazy loading.

25
00:01:56,630 --> 00:02:03,560
So in the end, why can't we just set some global variable which is a javascript object which stores our

26
00:02:03,560 --> 00:02:07,130
entire application state and which we can access from anywhere,

27
00:02:07,130 --> 00:02:10,630
why do we have to take the complicated route with query parameters

28
00:02:10,730 --> 00:02:18,770
if all we do is just use javascript in the end? The reason is that react's reactivity system doesn't react

29
00:02:18,800 --> 00:02:21,940
to changes in some global variable you defined

30
00:02:22,280 --> 00:02:23,790
and it's good that it doesn't,

31
00:02:23,840 --> 00:02:25,610
that makes it so efficient.

32
00:02:26,030 --> 00:02:33,320
However, having this global store still sounds very interesting and that's exactly what redux is about

33
00:02:33,350 --> 00:02:34,150
as you will learn.

34
00:02:34,340 --> 00:02:40,390
So let's take a closer look at redux before we then implement it to see how it works in action.