1 00:00:00,970 --> 00:00:03,890 In this part we are going to talk about the facts data. 2 00:00:03,910 --> 00:00:05,250 With youth we do so. 3 00:00:05,840 --> 00:00:09,550 So often we create this new brand culture. 4 00:00:09,790 --> 00:00:15,600 We are going to import the axles so we are going to install the axles. 5 00:00:16,660 --> 00:00:30,520 So we need to type npm install a field that's that safe and then we did the unnecessary code and then 6 00:00:30,520 --> 00:00:40,930 we import that we add and you the iPad and also use it as a thumb that we add and then we import the 7 00:00:40,940 --> 00:00:45,090 exiles from exhales. 8 00:00:45,640 --> 00:00:54,280 Next we are going to create a initial state which contained loading areas and also the to dos since 9 00:00:54,280 --> 00:00:59,440 we are going to flash the to do list from the takes on place holder. 10 00:00:59,440 --> 00:01:06,460 And then we are going to create a reducer which is equal to the state actions 11 00:01:11,340 --> 00:01:14,510 and as we already can expect. 12 00:01:14,610 --> 00:01:18,150 There are two cases that we are going to deal with. 13 00:01:18,150 --> 00:01:22,200 One is where and fresh data is fashion successfully. 14 00:01:22,200 --> 00:01:23,720 So we have to separate that data. 15 00:01:24,840 --> 00:01:29,870 So what we named as stack data is any road that you want or named it. 16 00:01:29,880 --> 00:01:34,830 We do not need brick because after we turn something. 17 00:01:34,830 --> 00:01:39,430 So in this case as we go into a set the loading to be false. 18 00:01:39,450 --> 00:01:42,060 We can copy this one and paste it here. 19 00:01:42,180 --> 00:01:49,760 We started to force and to do we said Ashton dot Palo the action pay payload will be fashioned it from 20 00:01:49,770 --> 00:01:51,710 using the axles and the order. 21 00:01:51,720 --> 00:01:54,830 Is there something wrong when we flash the data. 22 00:01:54,870 --> 00:01:59,290 So we have to start era again. 23 00:01:59,300 --> 00:02:00,650 We have to return something 24 00:02:04,840 --> 00:02:16,080 the loading again is false and the era we type it some eras and it reduced because we cannot fetch anything. 25 00:02:16,100 --> 00:02:20,300 We did it at an empty away and last default. 26 00:02:20,300 --> 00:02:25,480 What do we have do we tend to accrue and stay and then we can go to the app we go to use the use we 27 00:02:25,480 --> 00:02:26,030 would give her. 28 00:02:26,120 --> 00:02:33,690 And then we pass that we do it out here and initial stay and then create a state and also the dispatch. 29 00:02:33,720 --> 00:02:42,180 So now we are going to fetch data and we have to use that use if at if we type that trace on pace over 30 00:02:42,170 --> 00:02:42,810 there to do this. 31 00:02:42,830 --> 00:02:49,260 We already get a API which already can see the trees on. 32 00:02:49,290 --> 00:02:52,210 So we use these API. 33 00:02:52,210 --> 00:02:54,630 And back to our app. 34 00:02:55,210 --> 00:03:03,580 And then if we can successfully flash the data we have to dispatch the assertion that we just defined 35 00:03:03,580 --> 00:03:14,480 it is does that data and it will be a Jason object and that type is that data and the PLO is west of 36 00:03:16,340 --> 00:03:27,320 data and data dispatch the type in that era and since we already started era we do not have any pay 37 00:03:27,320 --> 00:03:28,320 though here. 38 00:03:28,520 --> 00:03:32,450 We do not have any dependency so we only just fetch it once. 39 00:03:32,450 --> 00:03:39,740 Now we can start the app and see whether we can fetch the data we type NPM stock in order to show the 40 00:03:40,820 --> 00:03:45,440 data we have to type the console load and rest our data. 41 00:03:45,440 --> 00:03:51,140 Now as you can see we already can fetch the data and it already displayed it in the console. 42 00:03:51,140 --> 00:03:59,210 No way you can do some conditional rendering if the state thought loading is equal to true then we are 43 00:03:59,210 --> 00:04:01,930 going to type the loading here. 44 00:04:02,390 --> 00:04:05,180 Otherwise we are going to rear ended the lease. 45 00:04:05,310 --> 00:04:15,930 But to be more convenient we are going to create this mockup and we set it here. 46 00:04:17,780 --> 00:04:24,460 For example we are going to create a save to check it red rug. 47 00:04:24,650 --> 00:04:32,060 Also we are going to check whether today's era if there is ever and we are going to display the era. 48 00:04:32,080 --> 00:04:34,350 Otherwise no. 49 00:04:34,400 --> 00:04:43,310 So you'll see if these can fetch the data it will show the least up and if we try to type something 50 00:04:43,340 --> 00:04:43,730 wrong 51 00:04:47,430 --> 00:04:49,700 you will see it there are some errors here. 52 00:04:50,010 --> 00:04:55,270 As you can see this is not a fairly good representation because the least markup and the errors. 53 00:04:55,440 --> 00:05:04,070 So both together so to create in a more elegant way is to copy this one and then we paste it here. 54 00:05:04,170 --> 00:05:10,800 So you said that if they is loading that we route display the loading. 55 00:05:10,800 --> 00:05:18,360 Otherwise we would check whether use error if days era it will display the errors otherwise it should 56 00:05:18,360 --> 00:05:20,510 be showed a list markup. 57 00:05:20,550 --> 00:05:26,400 Now you can see the list markup disappear and if we back to here and 58 00:05:32,590 --> 00:05:37,750 we correct this one it kind of show the data and there is no error here. 59 00:05:37,750 --> 00:05:42,620 And just the least markup is being shown in the web page. 60 00:05:42,700 --> 00:05:49,570 Now we can do some modification of the lease markup and if we get the data which means that we have 61 00:05:49,570 --> 00:05:51,910 the state not reduce. 62 00:05:52,030 --> 00:05:57,250 So we have stayed out to reduce thought map and then we have to do 63 00:06:01,820 --> 00:06:07,020 and then we create a loose wheel and we get it to do it on title. 64 00:06:07,760 --> 00:06:12,180 And the key is equal to to that I.D.. 65 00:06:12,590 --> 00:06:19,320 Now we read back to the patient you can see the to do title already displayed it here. 66 00:06:19,370 --> 00:06:23,310 So that is how to first date data with use. 67 00:06:23,360 --> 00:06:23,970 We deal with a.