1
00:00:10,130 --> 00:00:11,270
In this video.

2
00:00:11,270 --> 00:00:14,570
Let's get started with the use reducer.

3
00:00:14,750 --> 00:00:20,200
So inside the RC, we have a folder for context.

4
00:00:20,210 --> 00:00:28,040
So like I said, if we have pieces of data that are related, we are going to create a separate context

5
00:00:28,040 --> 00:00:29,420
file for that.

6
00:00:29,570 --> 00:00:34,670
But for to do application, we need to keep track of our to do so here.

7
00:00:34,670 --> 00:00:41,930
Going to be asked to do context, great duties.

8
00:00:41,930 --> 00:00:45,380
So let's bring in the use reducer.

9
00:00:48,090 --> 00:00:49,700
And here we go.

10
00:00:52,580 --> 00:00:56,690
For use reducer, it takes in two agreements.

11
00:00:56,720 --> 00:01:05,840
The first one is the reducer function, and then the next segment is going to be the initial states.

12
00:01:05,840 --> 00:01:08,960
So let's get back to the slide and let me show you here.

13
00:01:09,470 --> 00:01:15,830
So looking at this one, this is going to be our initial state for our application.

14
00:01:16,010 --> 00:01:23,090
And this is a function that's going to make changes to the initial state here by using what is called

15
00:01:23,090 --> 00:01:23,930
this patch.

16
00:01:23,930 --> 00:01:26,810
And we come back to it as you move on.

17
00:01:26,810 --> 00:01:36,440
So here we can provide an anonymous function here and start and this is a normal function and here because

18
00:01:36,440 --> 00:01:44,870
we are going to keep track of a race of to I will provide mine as an empty array.

19
00:01:45,110 --> 00:01:52,580
So here what comes back from this function is we have two important thing.

20
00:01:52,760 --> 00:02:01,610
The first one is going to be our state, and this state contains all the states inside the initial states.

21
00:02:01,940 --> 00:02:06,830
And we have a function called dispatch, like I said.

22
00:02:06,830 --> 00:02:09,979
Now here is the dispatch function.

23
00:02:10,220 --> 00:02:15,680
This is the function that is going to trigger our use reducer.

24
00:02:15,980 --> 00:02:23,360
But since we are going to make more logic inside the reducer function here, let's go ahead and create

25
00:02:23,360 --> 00:02:27,470
a function separately and then we reference it here.

26
00:02:27,470 --> 00:02:32,000
So here, let's cut this one and let's come up here.

27
00:02:32,000 --> 00:02:36,620
And first of all, let's create the reducer function.

28
00:02:38,470 --> 00:02:39,790
So here you go.

29
00:02:39,820 --> 00:02:46,360
Cons cost to do reducer.

30
00:02:48,990 --> 00:02:52,350
Is equal to arrow function.

31
00:02:53,360 --> 00:02:57,890
And let's also create our initial state here.

32
00:02:57,890 --> 00:03:00,650
Initial states.

33
00:03:07,010 --> 00:03:13,910
If you are building complex application that we aim to save a lot of data inside the initial state.

34
00:03:14,000 --> 00:03:22,040
So here, let's reference the initial state here and we pass in our to do reducer.

35
00:03:22,070 --> 00:03:27,200
Now this is how we create our use reducer.

36
00:03:27,230 --> 00:03:28,940
That is the first step.

37
00:03:29,090 --> 00:03:36,920
Now for the to do reducer, we have access to what is called states and then the action.

38
00:03:39,020 --> 00:03:39,620
Great.

39
00:03:40,040 --> 00:03:41,900
So what is a state?

40
00:03:41,990 --> 00:03:49,520
We have access to the entire state or the initial state inside our to do reducer and stuff.

41
00:03:49,820 --> 00:03:59,060
And then the action is going to contain the type of action that we want to take on our initial state.

42
00:03:59,300 --> 00:04:05,610
So from this diagram, we can say the type of action is to add to do.

43
00:04:05,630 --> 00:04:13,190
Because as soon as I hit add to do meaning that I want to take some data here and add to the original

44
00:04:13,190 --> 00:04:19,220
to do so for this, the type of action is what we call ad dude.

45
00:04:19,310 --> 00:04:28,610
So now inside here we are going to make logic whether to add record to our initial state or to remove.

46
00:04:28,760 --> 00:04:32,750
So here we can check that if action.

47
00:04:32,840 --> 00:04:37,040
And on that we have a property called type.

48
00:04:37,640 --> 00:04:46,400
If the action type is equal to add to do, then we are going to make logic here.

49
00:04:47,030 --> 00:04:51,740
Then we are going to add record to our initial state here.

50
00:04:52,190 --> 00:04:59,960
And one thing about reducer is that we should not mutate the original data.

51
00:05:00,200 --> 00:05:05,320
In that case, we are going to retain new data here.

52
00:05:05,330 --> 00:05:15,050
And for this we are going to spread the original state and how can we add our own data into it?

53
00:05:15,350 --> 00:05:19,640
So for this action, we have two properties.

54
00:05:19,760 --> 00:05:27,080
One is a type of action, and then the payload are the action objects.

55
00:05:27,380 --> 00:05:37,850
So looking at the diagram here, you can see that we are passing in a data code payload for the event.

56
00:05:37,850 --> 00:05:45,860
And like here, so the this part contains the action type and then the payload.

57
00:05:45,920 --> 00:05:55,330
So this reducer have access to the data that is coming on what is called action dot payload.

58
00:05:55,340 --> 00:06:02,340
And for that one, we are going to specify that normally we use what is called payload.

59
00:06:02,360 --> 00:06:08,060
So here we are going to add what is called action dot payload.

60
00:06:08,060 --> 00:06:12,910
And I will show you in a moment how we can get the payload.

61
00:06:12,920 --> 00:06:21,500
So now we are done with our reducer function for adding record into the initial state.

62
00:06:21,740 --> 00:06:29,900
So for this, we need to return the original data in case there is no action.

63
00:06:30,200 --> 00:06:31,330
So here we go.

64
00:06:31,340 --> 00:06:35,750
Going to be as retain the original state.

65
00:06:36,020 --> 00:06:44,960
So the next question is that how can a component have access to our state here and then a function that

66
00:06:44,960 --> 00:06:46,430
we are about to create?

67
00:06:46,730 --> 00:06:51,320
That is why we need what is called create context.

68
00:06:51,890 --> 00:07:00,410
So with the create context is going to help any component to have access to this data and the functions

69
00:07:00,410 --> 00:07:02,360
that we are about to create.

70
00:07:02,720 --> 00:07:16,220
So here we are going to export the context from here, and I'll call this one as to do context is equal

71
00:07:16,220 --> 00:07:18,340
to create context.

72
00:07:19,050 --> 00:07:23,300
I'm going to create what is called to do provide function.

73
00:07:23,300 --> 00:07:31,040
So let me export from this file as cons as to do context provider.

74
00:07:34,350 --> 00:07:37,420
Is equal to our function.

75
00:07:37,430 --> 00:07:43,340
So here I would structure the component that is the children.

76
00:07:43,550 --> 00:07:55,640
So here let's retain the to do context dot provider and then you pass in the children as that save it.

77
00:07:56,060 --> 00:07:58,370
Now we are good to go.

78
00:07:58,790 --> 00:08:06,680
So next step is that let's go ahead and then send the data to the provider.

79
00:08:06,800 --> 00:08:13,280
So let me put them in a fragment so that they will be on top of each other.

80
00:08:15,440 --> 00:08:15,940
Great.

81
00:08:15,950 --> 00:08:17,840
Something like this.

82
00:08:18,020 --> 00:08:18,440
All right.

83
00:08:18,440 --> 00:08:23,420
So for the provider, we are going to pass in what is called a value.

84
00:08:23,540 --> 00:08:29,190
And for this, we want to pass in the entire states into that.

85
00:08:29,210 --> 00:08:35,299
So here another basis and I'll pass in the states.

86
00:08:35,659 --> 00:08:42,140
So any component that is going to wrap with this provider is going to have our states.

87
00:08:42,530 --> 00:08:50,450
So next step is that let's go at the root of our project and wrap our provider because we want every

88
00:08:50,450 --> 00:08:53,450
component to have access to it.

89
00:08:53,600 --> 00:09:03,590
So here, let's bring in the to do context provider and we're going to wrap inside the app components.

90
00:09:03,740 --> 00:09:06,440
So this is a basic way of creating.

91
00:09:06,440 --> 00:09:15,770
We do some in the next video, I'll show you how we can create an action where we can add to do to our

92
00:09:15,770 --> 00:09:16,850
initial state.