1 00:00:00,630 --> 00:00:01,890 We're come back. 2 00:00:01,890 --> 00:00:05,310 Let's continue implementing our application. 3 00:00:05,610 --> 00:00:10,260 Well, I can say that we are done with the use reducer. 4 00:00:10,290 --> 00:00:11,970 That is the flow. 5 00:00:12,150 --> 00:00:17,440 What has left is our own logic to make something happen. 6 00:00:17,490 --> 00:00:25,910 So what we are going to do is that we want to take the to dos and save it into local storage. 7 00:00:25,920 --> 00:00:29,310 So let's see how we are going to achieve that. 8 00:00:29,430 --> 00:00:34,840 So back to our context and this is our context. 9 00:00:34,860 --> 00:00:43,770 So what we are going to do is we are going to save order to do stories inside our states into local 10 00:00:43,770 --> 00:00:44,590 storage. 11 00:00:44,610 --> 00:00:51,900 So any time we add new to do, we are going to have new to do it here and then we save it into local 12 00:00:51,900 --> 00:00:52,650 storage. 13 00:00:52,680 --> 00:00:56,880 Because of that, we are going to use what is called use effect. 14 00:00:57,060 --> 00:01:05,129 So up here, let's have a comment saying that safe to look at storage. 15 00:01:05,550 --> 00:01:06,320 Let's go. 16 00:01:06,330 --> 00:01:09,240 Let's bring in the use effect hook 17 00:01:11,880 --> 00:01:15,540 and you pass in the dependencies as that. 18 00:01:15,600 --> 00:01:24,180 So what we are going to do is that here we bring in the local storage dot set item and for this you 19 00:01:24,180 --> 00:01:26,140 pass in a variable. 20 00:01:26,160 --> 00:01:29,460 Let's call this one as to dos and then the value. 21 00:01:29,670 --> 00:01:35,820 So let's convert this one to string like JSON dot string fine. 22 00:01:35,970 --> 00:01:43,110 And then you pass in the to dos here that is our states as that all let's change this one to to do to 23 00:01:43,110 --> 00:01:48,320 be more specific or states so let's pass in here state. 24 00:01:48,360 --> 00:01:54,330 So now if the state changes, then you also want to save it back again. 25 00:01:54,420 --> 00:01:57,990 So with this one, if I save it, what is going to happen? 26 00:01:57,990 --> 00:02:02,850 Guys, remember, we are going to save this one into local storage. 27 00:02:02,880 --> 00:02:03,990 Let's have a look. 28 00:02:04,840 --> 00:02:08,520 By clicking on the application and then look after it. 29 00:02:08,530 --> 00:02:12,010 And you can see that we have our local storage here. 30 00:02:12,730 --> 00:02:16,880 Let me remove this one and this is what we are working on. 31 00:02:16,900 --> 00:02:22,490 If I refresh it and you can see that we have our initial record inside. 32 00:02:22,510 --> 00:02:25,900 Let me use some sensible text here than this. 33 00:02:25,900 --> 00:02:27,760 Numbers jog in. 34 00:02:29,480 --> 00:02:33,240 A, let's say codeine. 35 00:02:33,920 --> 00:02:37,040 So if I save this one, let's refresh it. 36 00:02:37,190 --> 00:02:42,800 You can see I have jogging and coding inside my local storage. 37 00:02:42,980 --> 00:02:44,020 So that is it. 38 00:02:44,030 --> 00:02:48,230 So let's go ahead and then display that one to the browser. 39 00:02:48,260 --> 00:02:53,590 So we are going to create an action to fetch all the dos. 40 00:02:53,600 --> 00:02:55,990 So how are we going to do that? 41 00:02:56,000 --> 00:03:03,830 So we are going to create a function to get this to dos and put it inside the initial state. 42 00:03:04,340 --> 00:03:13,820 So here we can even remove this one and then we bring in local storage function here, or we can create 43 00:03:13,820 --> 00:03:15,760 a separate function for it. 44 00:03:15,770 --> 00:03:21,080 So let me show you how we are going to create that function to get data from local storage. 45 00:03:21,080 --> 00:03:28,040 So it's going to be get data from local storage. 46 00:03:29,240 --> 00:03:43,550 So cost gets to DOS equal to and here let's assign the result to to dos and it's equal to local storage 47 00:03:43,760 --> 00:03:45,950 start date item. 48 00:03:46,130 --> 00:03:54,650 And I want the to dos because this is a variable that is inside my local storage. 49 00:03:55,070 --> 00:03:55,490 Great. 50 00:03:55,490 --> 00:03:59,900 So here, let's check if to dos. 51 00:04:00,740 --> 00:04:11,690 Then we are going to return by using json dot pass the pass in the to dos errors. 52 00:04:15,090 --> 00:04:18,630 We are going to retain an empty R rate. 53 00:04:18,750 --> 00:04:24,270 So for this one, I can use this one as my initial data here. 54 00:04:24,570 --> 00:04:34,110 So for this, I can even comment this one and pass in the get to dos here as my initial state here or 55 00:04:34,110 --> 00:04:35,700 to make it more readable. 56 00:04:35,730 --> 00:04:40,290 Let's bring the initial state down here and here. 57 00:04:40,290 --> 00:04:42,720 I can call the function. 58 00:04:42,720 --> 00:04:48,510 So let's remove the command and let's remove this one and bring the get to do. 59 00:04:49,110 --> 00:04:54,040 So in this one, if you save it, you're going to have the same result. 60 00:04:54,060 --> 00:05:00,090 So now inside the to do list components, we are going to have access to the states. 61 00:05:00,180 --> 00:05:02,050 So here is the state. 62 00:05:02,070 --> 00:05:06,840 So let's get back to the browser and let's check it is going to console.log that. 63 00:05:07,230 --> 00:05:08,820 And let's see. 64 00:05:09,030 --> 00:05:13,900 To do list that is line number seven. 65 00:05:13,920 --> 00:05:15,430 This what we have. 66 00:05:15,450 --> 00:05:17,820 So I want the states. 67 00:05:17,970 --> 00:05:19,970 So here we go. 68 00:05:19,980 --> 00:05:21,420 We're going to be states. 69 00:05:21,840 --> 00:05:22,560 States. 70 00:05:24,690 --> 00:05:28,710 And we have the draw game and then coding. 71 00:05:28,920 --> 00:05:31,890 So let's go ahead and then look through that. 72 00:05:31,920 --> 00:05:41,910 So inside the container here are going to take the state dot states where let's make it more readable 73 00:05:41,910 --> 00:05:47,890 by saying to do so here, let's make it as to dos. 74 00:05:50,040 --> 00:05:52,250 And then you pass in the States. 75 00:05:52,260 --> 00:05:56,070 So you're going to be asked to do the states? 76 00:05:56,940 --> 00:05:57,510 Yeah. 77 00:06:00,240 --> 00:06:00,820 Good. 78 00:06:00,840 --> 00:06:02,650 So let's save it before. 79 00:06:02,670 --> 00:06:06,410 If everything is right, where to do is not defined. 80 00:06:07,350 --> 00:06:10,500 Well, I think because you make changes. 81 00:06:10,500 --> 00:06:12,360 Let's get back to the to do list. 82 00:06:12,360 --> 00:06:13,530 Line number seven. 83 00:06:14,340 --> 00:06:17,310 Line number seven. 84 00:06:18,000 --> 00:06:20,220 Oh, let's structure that quickly. 85 00:06:20,220 --> 00:06:21,180 Sorry, guys. 86 00:06:21,870 --> 00:06:23,940 Yeah, yeah. 87 00:06:23,940 --> 00:06:27,660 So let's console.log and let's have a look at the structure. 88 00:06:27,990 --> 00:06:30,870 Yes, we have it as that. 89 00:06:31,260 --> 00:06:36,060 So now we can go ahead and then look through that. 90 00:06:36,060 --> 00:06:43,950 So here we bring in the to dos dirt map and you pass in the individual to dos. 91 00:06:43,950 --> 00:06:52,680 And here let's retain some X here and let's provide the dev. 92 00:06:57,410 --> 00:06:58,700 And for the class. 93 00:06:58,700 --> 00:07:05,810 For this day it was to do a dance atom, dance container. 94 00:07:07,010 --> 00:07:17,090 And inside here we have age three, where we are adding the title going to be as to do the title. 95 00:07:19,160 --> 00:07:22,760 And lastly, it's going to be the baton. 96 00:07:22,760 --> 00:07:23,780 So. 97 00:07:26,070 --> 00:07:27,630 As delete. 98 00:07:28,320 --> 00:07:31,470 So let's save it and let's check the browser. 99 00:07:31,710 --> 00:07:37,940 You can see we have to record, but there is no data here because for this data it is not an object. 100 00:07:37,950 --> 00:07:43,830 So let's move that and let's see and we have the gain and then the encoding. 101 00:07:43,830 --> 00:07:46,200 Let's also add the key here. 102 00:07:46,410 --> 00:07:48,780 Otherwise, react is not happy. 103 00:07:48,960 --> 00:07:50,940 It's going to be as to do. 104 00:07:51,630 --> 00:07:57,060 All right, so let's refresh it and everything is perfect. 105 00:07:59,080 --> 00:08:05,890 You can see everything is working fine, so let's go ahead and then implement the delete in the next 106 00:08:05,890 --> 00:08:06,550 video.