1
00:00:00,180 --> 00:00:02,850
Our basic setup worked some want.

2
00:00:02,910 --> 00:00:13,800
OK, now let's refactor this sucker to use a register and I'll start by removing these people and show

3
00:00:13,800 --> 00:00:18,870
no so we won't need these guys because we'll set up a new one.

4
00:00:19,260 --> 00:00:27,560
And we're going to go here again with our array instruction and we'll set up a state again that is just

5
00:00:27,570 --> 00:00:27,930
a name.

6
00:00:28,380 --> 00:00:30,270
So you can call this burrito if you want.

7
00:00:30,270 --> 00:00:37,530
But I'm going to go with State and then we have a second thing, a function, a specific function by

8
00:00:37,530 --> 00:00:39,000
the name of dispatch.

9
00:00:39,030 --> 00:00:44,520
Again, you can call this whatever you want, but a common practice is using this dispatch.

10
00:00:44,550 --> 00:00:44,880
Why?

11
00:00:45,290 --> 00:00:50,510
Well, because when we invoke use reducer, again, we're getting a few things back.

12
00:00:50,940 --> 00:00:53,070
We're getting the state value.

13
00:00:53,960 --> 00:01:01,310
And then we're getting the dispatch function similar, like how we have with you state now, the difference

14
00:01:01,310 --> 00:01:04,190
right now is that in the U.S.

15
00:01:04,220 --> 00:01:04,760
Reduce there.

16
00:01:04,760 --> 00:01:12,380
The first thing we pass in is the reducers function and the difference between the U.S. state and U.S.

17
00:01:12,380 --> 00:01:19,100
registered at each and every time you want to do something with that whole state, you always, always,

18
00:01:19,130 --> 00:01:22,250
always must use this punch.

19
00:01:22,460 --> 00:01:24,560
And it's going to go through the user.

20
00:01:24,800 --> 00:01:31,660
And you can think of reduce function as something that takes the old state and takes in something called

21
00:01:31,680 --> 00:01:36,600
action, which you are going to cover a little bit later and then spits back that new state.

22
00:01:36,860 --> 00:01:39,470
So you always need to have that reduced function.

23
00:01:39,710 --> 00:01:47,660
And the kicker here is that eventually we'll move this into a separate file just so we have less code.

24
00:01:48,580 --> 00:01:55,060
And our main component, so reduce our function, it is just a simple function, so we set up a producer

25
00:01:55,390 --> 00:01:58,160
and then eventually it's going to look for two things.

26
00:01:58,510 --> 00:02:03,550
So state that is going to be the state right before the update and then the action.

27
00:02:03,760 --> 00:02:07,780
And you can think of actions of what are we trying to do now?

28
00:02:07,850 --> 00:02:12,160
For now, we'll just leave it blank and we'll get there in no time.

29
00:02:12,410 --> 00:02:18,790
So user juicer is looking for a juicer for the function of that will manipulate the state.

30
00:02:19,240 --> 00:02:24,550
And it will happen once we call dispatch or once we dispatch the action.

31
00:02:24,550 --> 00:02:27,220
I guess that is more proper way of saying that.

32
00:02:27,460 --> 00:02:31,890
And then the second one is that initial state.

33
00:02:32,120 --> 00:02:39,540
Now we can set us up as far as the separate variable if you want, or you can type it directly in here.

34
00:02:40,240 --> 00:02:41,560
I think I'm going to go here.

35
00:02:41,860 --> 00:02:47,220
I'm going to say CONSED and then default state and that is going to be my object.

36
00:02:47,500 --> 00:02:49,070
Now, any object what I would want?

37
00:02:49,090 --> 00:02:51,070
Well, we had a people, correct.

38
00:02:51,070 --> 00:02:52,290
So that was my people all.

39
00:02:53,110 --> 00:02:58,540
And for the time being is just going to be blanko than we had shall model.

40
00:02:58,900 --> 00:02:59,310
Right.

41
00:02:59,590 --> 00:03:00,820
So if you want you can go.

42
00:03:00,820 --> 00:03:02,290
Is model open.

43
00:03:02,590 --> 00:03:04,390
Let's maybe try it out that way.

44
00:03:04,690 --> 00:03:09,940
Is Motal open and by default is going to be false.

45
00:03:09,950 --> 00:03:11,320
So it's not going to be open.

46
00:03:11,590 --> 00:03:16,870
And then last one is going to be Motal content, whatever text we would want to place over here.

47
00:03:17,140 --> 00:03:23,860
So I'll have a model content and on here I'll just start with Hello World.

48
00:03:24,040 --> 00:03:26,710
Eventually of course it is going to be an empty string.

49
00:03:26,980 --> 00:03:32,560
And now where we have this used reducer, we pass it that default state again.

50
00:03:32,890 --> 00:03:36,050
You could have easily set this up as an object right here as well.

51
00:03:36,550 --> 00:03:40,720
Now once we have that, of course our app will break for multiple reasons.

52
00:03:40,900 --> 00:03:44,490
For example, there is no show model anymore.

53
00:03:44,830 --> 00:03:51,910
So first, what I would want you to do is just save and then slowly but surely we'll start dealing with

54
00:03:51,910 --> 00:03:52,540
these errors.

55
00:03:52,780 --> 00:03:58,150
And first, I would want to remove all these three functions if name is there as well as this one,

56
00:03:58,720 --> 00:04:00,280
because we won't need them anymore.

57
00:04:00,640 --> 00:04:05,140
And where we have show model, well, now we have a state, correct.

58
00:04:05,150 --> 00:04:06,050
That is the object.

59
00:04:06,310 --> 00:04:07,840
So now what I would want to do.

60
00:04:08,880 --> 00:04:16,950
Of course, is to change it around and say state and then is model open because that is the property

61
00:04:17,190 --> 00:04:20,070
that is responsible for showing the model.

62
00:04:20,340 --> 00:04:25,710
And then where we have the people, again, we need to go with state and then people.

63
00:04:25,740 --> 00:04:27,950
Now, of course, it is going to be an empty array.

64
00:04:28,650 --> 00:04:33,730
So don't be upset if there's nothing on the screen and of course, there's nothing there.

65
00:04:33,960 --> 00:04:36,590
So we are in good shape.

66
00:04:36,930 --> 00:04:45,420
And before we go any further, let me just pass in two things into the model or you know what?

67
00:04:45,420 --> 00:04:49,620
Let's start with one, and then eventually there's going to be another one once we set up the function.

68
00:04:49,920 --> 00:04:58,110
So in the model, I would want to set up a model content and I'll pass in state and then model again

69
00:04:58,320 --> 00:05:02,880
property that is coming from my state value.

70
00:05:03,240 --> 00:05:08,490
And then before we go any further, I also want to show the model.

71
00:05:09,370 --> 00:05:15,850
Meaning I would want to add some changes to the model where it's going to be the structure and two things

72
00:05:16,330 --> 00:05:21,460
model content and eventually close model function, which we don't have at the moment.

73
00:05:21,790 --> 00:05:30,790
And as far as the return, let's add a class name and then add model and then inside this paragraph.

74
00:05:31,510 --> 00:05:35,380
Let's just go with a model content.

75
00:05:36,040 --> 00:05:37,240
So model.

76
00:05:38,220 --> 00:05:46,800
Moral content not save, and now, of course, if you want to test out this manually, the only thing

77
00:05:46,950 --> 00:05:49,650
you need to do is just change these values.

78
00:05:50,040 --> 00:05:52,440
So we have the data right now.

79
00:05:52,450 --> 00:05:59,360
I'm not going to set up adding data because I want we will do through the register properly.

80
00:05:59,700 --> 00:06:06,000
Or if you want to see whether you can access these values in a state, simply set people equal to the

81
00:06:06,000 --> 00:06:06,310
data.

82
00:06:06,630 --> 00:06:11,730
Now, of course, you have the data just to show that it is still just an object.

83
00:06:11,920 --> 00:06:16,540
We're still accessing that in a state and it is an object and it has properties.

84
00:06:16,830 --> 00:06:18,750
So if I would want to show the moral.

85
00:06:19,620 --> 00:06:25,170
And of course, I'll say that it is true because I have state motto is open, so if it is true, then

86
00:06:25,170 --> 00:06:29,250
show the model and model Conan will be Hello World America is now.

87
00:06:29,250 --> 00:06:31,220
Of course, I have the hello world.

88
00:06:31,350 --> 00:06:35,430
Yes, of course we will do this dynamically starting from next video.

89
00:06:35,880 --> 00:06:43,200
But for now, just understand that we have a state which is an object and in that object we have these

90
00:06:43,200 --> 00:06:44,130
multiple properties.

91
00:06:44,430 --> 00:06:50,760
And the whole idea is why we're using that user juicer, because I only want to update these things

92
00:06:50,790 --> 00:06:59,370
once I call dispatch and once I pass in the proper action and I'll handle all of them in one place.

93
00:06:59,670 --> 00:07:06,150
It's only going to happen in one place in that producer and essentially it will just be affecting the

94
00:07:06,180 --> 00:07:06,610
state.

95
00:07:07,380 --> 00:07:13,980
So now let me go back to property values, where we have empty string, where it is hidden by default

96
00:07:14,430 --> 00:07:23,250
and the people will be an empty array and now we can start dealing with our producer.