1
00:00:02,270 --> 00:00:04,960
So redux to the rescue, redux is awesome, right?

2
00:00:05,090 --> 00:00:08,780
It allows us to solve all our problems, doesn't it?

3
00:00:08,780 --> 00:00:10,340
How does redux work then?

4
00:00:10,640 --> 00:00:16,200
Well remember that idea of having some central place where you manage the entire state,

5
00:00:16,280 --> 00:00:20,120
I said that we can't use a global variable for that and we can't

6
00:00:20,450 --> 00:00:28,190
but redux gives us a certain flow of data, a certain way of managing data that we can then nicely integrate

7
00:00:28,340 --> 00:00:31,190
with another package into the react app,

8
00:00:31,460 --> 00:00:35,310
so that react does react to changes of data.

9
00:00:35,450 --> 00:00:37,480
Now we'll show you how that integration works

10
00:00:37,610 --> 00:00:40,260
but first, let me describe her redux works.

11
00:00:40,310 --> 00:00:44,720
How does it manage data and how does it update it? In the end,

12
00:00:44,720 --> 00:00:49,440
it's all about a central store we have in each redux application.

13
00:00:49,670 --> 00:00:56,280
And I want to highlight that redux is a third party library which works totally independent of react,

14
00:00:56,330 --> 00:01:02,160
it's most often seen in conjunction with react but theoretically, it's independent.

15
00:01:02,450 --> 00:01:04,310
So it's all about a central store,

16
00:01:04,310 --> 00:01:07,370
this store stores the entire application state,

17
00:01:07,370 --> 00:01:08,290
it's that simple,

18
00:01:08,330 --> 00:01:12,800
you can think about it as a giant javascript object.

19
00:01:13,070 --> 00:01:18,860
Now in a react application and again, redux is independent from react but it's the most common use

20
00:01:18,860 --> 00:01:21,350
case and it's a react course here in the end.

21
00:01:21,530 --> 00:01:29,630
We've got components and a component probably wants to manipulate or get the current application state,

22
00:01:29,630 --> 00:01:34,990
now it doesn't do that by directly manipulating that central javascript object,

23
00:01:35,090 --> 00:01:42,320
that would not be picked up by react's reactivity system and even worse, it would make our store pretty

24
00:01:42,380 --> 00:01:50,450
unpredictable. If we added it from anywhere in our application, that we can never see where we made a certain

25
00:01:50,450 --> 00:01:52,790
change that broke our app, for example.

26
00:01:52,790 --> 00:01:59,180
So we need to have a clear, predictable process of updating the state on which we can rely on and which is

27
00:01:59,180 --> 00:02:02,210
the only process that can change our state.

28
00:02:02,510 --> 00:02:09,310
That is actually what redux is all about, having a clearly defined process of how your state may change.

29
00:02:09,650 --> 00:02:16,430
The first building block besides the central store are actions which are dispatched from your javascript

30
00:02:16,430 --> 00:02:23,540
code, in a react app, they are dispatched from within your components. And action is just information package

31
00:02:23,540 --> 00:02:28,740
in the end with a type, something like addIngredient or removeIngredient,

32
00:02:28,790 --> 00:02:31,960
so a description you could say. Possibly,

33
00:02:32,060 --> 00:02:33,950
it also holds a payload,

34
00:02:33,950 --> 00:02:41,360
for example if the action is addIngredient, we need to also pass the information which ingredient and

35
00:02:41,360 --> 00:02:43,360
that would also be a part of the action.

36
00:02:43,370 --> 00:02:49,070
So it's a information package we're sending out to the world or to redux to be precise,

37
00:02:49,580 --> 00:02:52,730
that action doesn't directly reach the store,

38
00:02:52,760 --> 00:02:57,290
that action doesn't hold any logic, it doesn't know how to update the store,

39
00:02:57,290 --> 00:03:00,240
it's just a messenger. The thing

40
00:03:00,290 --> 00:03:03,160
changing the store is a reducer.

41
00:03:03,170 --> 00:03:09,010
Now here I've written reducers because we actually can combine multiple reducers into one

42
00:03:09,230 --> 00:03:14,590
but in the end, you'll end up with one route reducer which is directly connected to your store in the

43
00:03:14,590 --> 00:03:15,160
end.

44
00:03:15,170 --> 00:03:21,440
So the action reaches the reducer and since the action contains a type, the reducer can check the type

45
00:03:21,440 --> 00:03:22,420
of the action,

46
00:03:22,430 --> 00:03:30,600
for example if it's addIngredient and we then define the code for that type of action in the reducer. The

47
00:03:30,740 --> 00:03:39,020
reducer in the end is just a pure function which receives the action and the old state as input and

48
00:03:39,020 --> 00:03:42,340
which then spits out an updated state.

49
00:03:42,350 --> 00:03:50,210
The important thing is that the reducer has to execute synchronous code only, no asynchronous code, no

50
00:03:50,210 --> 00:03:53,650
side effects, no HTTP requests, nothing of that,

51
00:03:53,720 --> 00:03:59,970
you'll learn later how you can still implement asynchronous code but in reducers, it's just input in,

52
00:04:00,110 --> 00:04:02,020
output out, nothing in between,

53
00:04:02,150 --> 00:04:03,320
no delay.

54
00:04:03,770 --> 00:04:09,890
So this is the reducer and the reducer spits up the updated state which then is stored in the store

55
00:04:09,890 --> 00:04:12,050
again and replaces the old state

56
00:04:12,050 --> 00:04:15,120
and that has to be done in an immutable way,

57
00:04:15,170 --> 00:04:20,930
so we always return a new state which can be based on the old one but which is technically a new javascript

58
00:04:20,960 --> 00:04:26,840
object, because objects are reference types in Javascript and we want to make sure that we don't accidentally

59
00:04:26,840 --> 00:04:28,280
change the old one.

60
00:04:28,520 --> 00:04:31,890
So that is how the reducer handles the action,

61
00:04:31,910 --> 00:04:33,800
now the store is up to date.

62
00:04:33,830 --> 00:04:40,610
How do we get the updated state back into our component then? For that, we use a subscription model.

63
00:04:41,270 --> 00:04:48,920
The store triggers all subscriptions whenever the state changes, whenever the state is updated in the store.

64
00:04:49,190 --> 00:04:56,340
And of course our component can subscribe to store updates and it then receives that update automatically,

65
00:04:56,360 --> 00:04:57,630
this is how simple it is.

66
00:04:57,650 --> 00:05:03,450
It works through a subscription model and we simply say hey I want to get notified whenever the state

67
00:05:03,450 --> 00:05:04,130
changes,

68
00:05:04,260 --> 00:05:06,830
just as we say hey I want to change the state,

69
00:05:06,840 --> 00:05:09,390
here is an action describing my plans.

70
00:05:09,410 --> 00:05:10,680
This is the redux flow,

71
00:05:10,730 --> 00:05:12,060
this is how redux works,

72
00:05:12,060 --> 00:05:15,650
very theoretical though. Let's see it in action over the next lectures.