1 00:00:00,330 --> 00:00:04,230 Before we continue on, we made some small mistake here. 2 00:00:04,260 --> 00:00:10,090 We need to put this wine inside the components that is the provider. 3 00:00:10,110 --> 00:00:16,050 So let's cut from here and put it inside the components. 4 00:00:16,110 --> 00:00:20,350 So if you save it, I'm going to have a start. 5 00:00:20,370 --> 00:00:27,140 So the next step is that how can we add data into that before we continue? 6 00:00:27,210 --> 00:00:35,190 Let's go ahead and then access the original state here inside the to do list component. 7 00:00:35,220 --> 00:00:44,070 So back to the to do list components, which is this one, to be able to use a data from context as 8 00:00:44,070 --> 00:00:52,230 we did before, we need the use context and we also need the to do context. 9 00:00:52,230 --> 00:01:02,570 So inside the to do list here, I'm going to call the use context and our pass in the to do context. 10 00:01:02,580 --> 00:01:06,780 So what comes back is the actual data. 11 00:01:06,780 --> 00:01:15,990 So I'll call this one as a state and if you go ahead and then console.log states, let's see what we 12 00:01:15,990 --> 00:01:17,070 are going to get. 13 00:01:17,190 --> 00:01:26,820 So let's open our console and you can see that we have an object with a state which is an empty array 14 00:01:26,820 --> 00:01:28,830 and this is what we call context. 15 00:01:28,830 --> 00:01:31,890 And we have done that one in the previous video. 16 00:01:32,100 --> 00:01:41,730 So if I pass in 1020 and save it and you can see that I have array of to record inside that. 17 00:01:41,730 --> 00:01:43,670 So let's continue. 18 00:01:43,980 --> 00:01:47,850 So back to the context, how can we add data? 19 00:01:47,850 --> 00:01:51,680 Remember, we can pass function to the value here. 20 00:01:51,690 --> 00:01:55,560 So let's go ahead and create our first action. 21 00:01:55,560 --> 00:02:04,260 Remember from the slide to allow reducer to make changes to our original array unless we pass in the 22 00:02:04,260 --> 00:02:06,540 action type and the payload. 23 00:02:06,560 --> 00:02:13,700 When the payload, it means the data that we want to add to the original data. 24 00:02:13,710 --> 00:02:21,590 So let's go ahead and then create one action, make sure that you create it inside the provider. 25 00:02:21,600 --> 00:02:27,540 So the first state is going to be as ADD to do. 26 00:02:29,270 --> 00:02:29,660 All right. 27 00:02:29,660 --> 00:02:35,570 So how are you going to create it going to be a normal function called add to do. 28 00:02:35,570 --> 00:02:39,260 And I always like to add an action to it. 29 00:02:39,380 --> 00:02:47,420 And this function is going to take in a title that I want to create or I want to add to mine to do. 30 00:02:47,420 --> 00:02:51,580 And here we are going to call the dispatch function. 31 00:02:51,590 --> 00:02:57,650 This function is given to us by the use reducer, which is this one here. 32 00:02:57,800 --> 00:03:05,390 So for this we are going to pass in what is called the action type and then the payload, the action 33 00:03:05,390 --> 00:03:10,790 type is going to allow the reducer to be executed. 34 00:03:10,850 --> 00:03:12,230 So here we go. 35 00:03:12,230 --> 00:03:20,150 You provide what is called type and here you provide the action type code to do. 36 00:03:20,360 --> 00:03:25,280 We often use what is called upper casing here and that is a type. 37 00:03:25,280 --> 00:03:34,190 So with this one, if I go ahead and then call this function called add to do, we are going to see 38 00:03:34,190 --> 00:03:37,310 something inside the original array. 39 00:03:37,700 --> 00:03:46,910 Before we get into that here, let's remove the payload for now and let's add what is called go shopping. 40 00:03:50,590 --> 00:03:52,510 So what is going on here? 41 00:03:52,540 --> 00:04:01,390 This means that if we dispatch our action or call the action and then our reducer is going to be triggered. 42 00:04:01,390 --> 00:04:02,200 Why? 43 00:04:02,230 --> 00:04:09,790 Because the reducer is going to look at the action type, which is hard to do and indeed it is hard 44 00:04:09,790 --> 00:04:10,810 to do here. 45 00:04:10,930 --> 00:04:17,019 If it sees that, then it's going to add this one to the original data here. 46 00:04:17,079 --> 00:04:19,570 So now let's see in action. 47 00:04:19,570 --> 00:04:26,110 We need to pass this function to the value here as core add to do action. 48 00:04:26,290 --> 00:04:33,520 So inside the to do list we have access to the ad to do action. 49 00:04:33,550 --> 00:04:38,410 If you console.log the stage, you are going to have the action on the stage. 50 00:04:38,500 --> 00:04:48,640 So let's check it out in the browser here and objects and you can see that we have an action, but for 51 00:04:48,640 --> 00:04:53,800 this action we need it inside the active component. 52 00:04:53,800 --> 00:05:02,380 So I want to copy this one and then go to the attitude and then let me bring it here. 53 00:05:02,740 --> 00:05:06,150 We also need the use contexts here. 54 00:05:06,160 --> 00:05:12,960 So let me bring in the use context and I need the to do context also. 55 00:05:12,970 --> 00:05:16,300 Now I have all the ingredients. 56 00:05:16,390 --> 00:05:17,950 Let me have some space. 57 00:05:18,190 --> 00:05:20,920 So here we have our use context. 58 00:05:20,920 --> 00:05:31,510 So what I want is the action so I can do structure from here as to do as ad to do action. 59 00:05:35,050 --> 00:05:35,470 Great. 60 00:05:35,470 --> 00:05:43,010 And I also want the states let me see what I pass in here, which is the state here. 61 00:05:43,030 --> 00:05:46,090 So here I also need the state. 62 00:05:46,240 --> 00:05:54,640 So if I console.log the action, I'm going to see the action and that is my function. 63 00:05:54,760 --> 00:05:56,800 So how can I trigger it? 64 00:05:56,830 --> 00:06:03,610 Well, on the button we are going to add an event listener called on Click. 65 00:06:05,970 --> 00:06:10,050 And our past in the ACT do function. 66 00:06:12,070 --> 00:06:12,490 Great. 67 00:06:12,490 --> 00:06:20,350 So this function I'm going to pass in what is called a title to call the function inside the event handler. 68 00:06:20,350 --> 00:06:27,400 Unless we give it to an anonymous function here, in that way we can call our function like this. 69 00:06:27,700 --> 00:06:31,120 For the meantime, let's ignore the arguments. 70 00:06:31,120 --> 00:06:34,690 So let's also console.log the state here. 71 00:06:35,050 --> 00:06:39,520 So as soon as I click on ADD, let's see what is going to happen. 72 00:06:39,970 --> 00:06:42,220 Now let's refresh it. 73 00:06:42,400 --> 00:06:46,480 And now you can see that we have two data inside. 74 00:06:46,540 --> 00:06:54,670 But as soon as I hit ADD, let's have a look where something happened because it refreshes my application. 75 00:06:54,970 --> 00:06:59,140 To avoid that, let's add our submit handler here. 76 00:06:59,620 --> 00:07:03,760 So here is a function const handle 77 00:07:05,770 --> 00:07:20,140 submits is equal to the event and inside our prevent the browser default prevent default and I will 78 00:07:20,140 --> 00:07:27,250 pass in here as on submit and it's going to be as handle submit. 79 00:07:27,370 --> 00:07:30,040 So this one, let's try again. 80 00:07:30,040 --> 00:07:33,700 Let's refresh it and let's hit send. 81 00:07:34,750 --> 00:07:39,520 And you can see that now our states, we have a record. 82 00:07:39,610 --> 00:07:45,370 You can see we have the ten, 20 and then the shopping property that we add. 83 00:07:45,400 --> 00:07:47,800 So what is going on here? 84 00:07:47,890 --> 00:07:49,900 Let's go over the code again. 85 00:07:49,900 --> 00:07:51,700 Back to the context. 86 00:07:51,790 --> 00:07:53,530 This how it works. 87 00:07:53,950 --> 00:08:00,610 Any time we dispatch an action as we see here, we add dispatch in an action. 88 00:08:00,700 --> 00:08:04,070 And this action contains what is called payload. 89 00:08:04,090 --> 00:08:07,720 But for our case, we are not passing in any data here. 90 00:08:07,750 --> 00:08:16,690 So as soon as the Action Dispatch, then our reducer is going to look up the action with the type. 91 00:08:16,720 --> 00:08:22,750 If it matches what is inside the reducer, then is going to execute our logic. 92 00:08:22,750 --> 00:08:29,050 And our logic here is that take all the original array and add this one to it. 93 00:08:29,170 --> 00:08:32,289 So what about if we want to make it more dynamic? 94 00:08:32,650 --> 00:08:37,960 That is why we need to pass in another attribute called payload. 95 00:08:38,110 --> 00:08:39,789 It can be anything here. 96 00:08:40,559 --> 00:08:43,380 So for this we can say study. 97 00:08:44,280 --> 00:08:51,030 So now how can we have access to this inside our reducer here? 98 00:08:51,090 --> 00:08:55,890 So if you console.log the action inside here. 99 00:08:56,040 --> 00:08:57,630 Let's consider that. 100 00:08:57,840 --> 00:09:04,500 Now, let's go back to our application and let's refresh it after refresh. 101 00:09:04,500 --> 00:09:07,160 And you can see that nothing seems to be displayed. 102 00:09:07,170 --> 00:09:14,190 We have the normal console.log because I have not triggered or dispatched any action. 103 00:09:14,220 --> 00:09:18,390 If I click on ADD, I am dispatching something. 104 00:09:18,480 --> 00:09:20,440 And here is a clue. 105 00:09:20,550 --> 00:09:22,530 You can see that for action. 106 00:09:22,530 --> 00:09:24,410 We have two properties. 107 00:09:24,420 --> 00:09:28,140 The first one is a type and then the payload. 108 00:09:28,350 --> 00:09:32,640 Our payload contains the data that you want to send. 109 00:09:32,820 --> 00:09:41,520 So for this, we can replace this one with what is called action dot payload. 110 00:09:41,820 --> 00:09:46,890 So with this one, let's go ahead and then trigger the action again. 111 00:09:46,920 --> 00:09:51,060 So now let's hit add this time around. 112 00:09:51,060 --> 00:09:54,240 We have studied in an hour array. 113 00:09:54,270 --> 00:09:56,650 So that is about the payload. 114 00:09:56,670 --> 00:10:04,110 So now we can go ahead upon calling this one, we can pass in our title. 115 00:10:04,140 --> 00:10:11,280 So back to the juju context, we are going to move this one and pass in the title here. 116 00:10:11,640 --> 00:10:16,290 So back to add to do, we are going to pass in the title. 117 00:10:16,560 --> 00:10:24,060 So inside this, we are going to allow the summit handler to call this function for us. 118 00:10:24,060 --> 00:10:29,370 So let's remove this one from here and let's place it here and here. 119 00:10:29,370 --> 00:10:37,720 We have access to the title as we pass in here, the title from our state, and that is it. 120 00:10:37,740 --> 00:10:39,690 So now let's check it out. 121 00:10:39,720 --> 00:10:48,330 If I enter, let's say Eden, you can see, I guess, some strange error here is that a component is 122 00:10:48,330 --> 00:10:56,100 changing from control to uncontrolled, meaning that we are not passing in our handle change or it's 123 00:10:56,100 --> 00:10:57,930 supposed to be value. 124 00:10:58,170 --> 00:11:01,020 Sorry, guys, ask that. 125 00:11:01,320 --> 00:11:04,410 So let's save it and let's refresh it. 126 00:11:04,590 --> 00:11:06,540 So now React is happy. 127 00:11:06,540 --> 00:11:08,840 So let's say it in yen. 128 00:11:08,970 --> 00:11:17,670 And when I hit send you can see that we have a new data by adding what is called eating. 129 00:11:17,940 --> 00:11:28,380 If I add what is called walking and I hit, since you can see that we are adding record into our initial 130 00:11:28,380 --> 00:11:31,120 state, how are some areas? 131 00:11:31,140 --> 00:11:39,210 So the next video we are going to create a function to save this record into local storage. 132 00:11:39,240 --> 00:11:42,000 Let's get into that in the next video.