1 00:00:00,180 --> 00:00:03,730 Excellent work, all of our functionality works part. 2 00:00:03,840 --> 00:00:10,020 Now would want to make it a bit more interesting where I would want to show you how we can fetch data 3 00:00:10,260 --> 00:00:12,280 using use reducer. 4 00:00:12,750 --> 00:00:15,510 So let's go back to our context. 5 00:00:15,810 --> 00:00:19,260 And essentially the idea is exactly the same like we did previously. 6 00:00:19,510 --> 00:00:21,860 We will still have the use effect. 7 00:00:22,290 --> 00:00:24,820 So still fresh in the same way. 8 00:00:25,190 --> 00:00:31,350 Now, the difference is going to be that once we get the data back, then, of course, I would want 9 00:00:31,350 --> 00:00:34,580 to dispatch and add it to my card. 10 00:00:34,800 --> 00:00:36,770 So essentially add it to my step. 11 00:00:37,020 --> 00:00:39,660 As far as the URL, I have it over here. 12 00:00:40,090 --> 00:00:45,860 So if you want to check it out, just navigate the bigger browser, copy and paste and nerdish. 13 00:00:46,170 --> 00:00:48,300 We're going to have an array of four items. 14 00:00:48,480 --> 00:00:52,540 Now, I added four items just so you can clearly see that we're pitching there. 15 00:00:52,800 --> 00:00:58,020 So in our hard coded values, we have three and then once we fudge, we've got four. 16 00:00:58,330 --> 00:00:58,920 All right. 17 00:00:59,250 --> 00:01:00,750 So we already know the drill. 18 00:01:00,760 --> 00:01:02,630 We will need to set up the function. 19 00:01:03,000 --> 00:01:09,090 And I think I'm going to do it over here in second and I'll call this fetch data. 20 00:01:09,870 --> 00:01:17,400 And as far as the parameters, I don't need any, but I would want to dispatch loading now, why do 21 00:01:17,400 --> 00:01:18,570 I want to dispatch loading? 22 00:01:19,020 --> 00:01:26,680 Because once I start watching, which I want to say, hey, listen, I'm loading my data now, of course, 23 00:01:26,680 --> 00:01:29,750 at the moment we don't take care of that energy, sir. 24 00:01:29,760 --> 00:01:30,300 Don't worry. 25 00:01:30,300 --> 00:01:36,360 We will not dispatch online type ears and land loading. 26 00:01:36,780 --> 00:01:38,190 OK, beautiful. 27 00:01:38,460 --> 00:01:43,940 So we're loading while we're watching and let's set up the functionality where we go with CONSED. 28 00:01:44,220 --> 00:01:50,700 And you know what I forgot to add here a sink since of course I'm going to use the await functionality, 29 00:01:51,030 --> 00:01:55,240 I'm going to go with the response I want is equal to await and then fetch. 30 00:01:55,290 --> 00:01:56,610 We pass in the URL. 31 00:01:56,700 --> 00:02:03,360 Once we've got the response I can go with CONSED and the card that I want is equal to response that 32 00:02:03,360 --> 00:02:05,430 Jason online wants. 33 00:02:05,430 --> 00:02:07,050 I've got my card now. 34 00:02:07,050 --> 00:02:13,020 I would want to pass it in to my dispatch so we have one dispatch for loading and then there's going 35 00:02:13,020 --> 00:02:15,810 to be second one for displaying the items. 36 00:02:16,080 --> 00:02:21,810 So we go for dispatch, then we have the object and then we have to type and I'll call this display 37 00:02:22,110 --> 00:02:24,900 and line underscore items like so. 38 00:02:25,260 --> 00:02:31,530 And now of course I would want to go with payload so and then I'll pass in the car. 39 00:02:31,980 --> 00:02:39,180 So whatever I'm getting back from the API, I'll pass it as a payload into the producer. 40 00:02:39,560 --> 00:02:40,770 Let's save it. 41 00:02:40,770 --> 00:02:46,440 And of course I want to call it and I don't want to call it only when my app renders I go with another 42 00:02:46,440 --> 00:02:51,210 year's effect, since we know that we can set up as many use effects as we would want. 43 00:02:51,600 --> 00:02:57,600 And of course I'll have empty dependency array and I'm just going to say fetch and then data. 44 00:02:57,690 --> 00:03:00,240 And of course, I would need to invoke it. 45 00:03:00,600 --> 00:03:08,460 So once I invoke the function and of course we navigate to the register and let's start with the loading 46 00:03:08,460 --> 00:03:08,640 one. 47 00:03:09,090 --> 00:03:12,510 So what do I want to do when I'm loading? 48 00:03:12,900 --> 00:03:14,100 Well, pretty simple. 49 00:03:15,090 --> 00:03:23,700 I would want to first check for that type somewhere to say if I'm an action type is equal to a loading, 50 00:03:24,180 --> 00:03:27,960 then of course I would want to set my loading property to. 51 00:03:27,960 --> 00:03:28,270 True. 52 00:03:28,530 --> 00:03:31,260 So we're going to go with return on that. 53 00:03:31,260 --> 00:03:34,740 And then we have the state, of course, and it is loading. 54 00:03:35,010 --> 00:03:36,800 Unloading is equal to true. 55 00:03:37,200 --> 00:03:37,830 We save it. 56 00:03:38,040 --> 00:03:41,540 And then right away, the moment we start fetching that we have the line. 57 00:03:41,940 --> 00:03:45,000 Now the next time you're displaying the items. 58 00:03:45,000 --> 00:03:45,220 Right. 59 00:03:45,330 --> 00:03:49,110 So we'll go it if and then action type No. 60 00:03:49,110 --> 00:03:54,060 One is equal to display and underscore items. 61 00:03:54,540 --> 00:03:57,150 And now, of course, again, I would want to return the whole state. 62 00:03:57,420 --> 00:04:00,780 Some would say state like so and not comma. 63 00:04:01,050 --> 00:04:04,650 And I would want to set my cart to the action. 64 00:04:04,650 --> 00:04:06,500 And then why won't? 65 00:04:06,510 --> 00:04:12,660 Because that is where my car is, the one that I fetched from the FBI. 66 00:04:12,960 --> 00:04:18,360 And of course, since I don't want to have the loading anymore, I don't need to call another dispatch. 67 00:04:18,720 --> 00:04:21,870 I can simply say, yeah, in this case I set loading Patro. 68 00:04:22,290 --> 00:04:26,720 So let's add comma and say loading is equal to force. 69 00:04:27,060 --> 00:04:31,440 And then of course the moment we get our data back we should see the car. 70 00:04:31,830 --> 00:04:37,620 Now the problem is going to be that we're going to get a big fat error simply because I wasn't paying 71 00:04:37,620 --> 00:04:38,130 attention. 72 00:04:38,430 --> 00:04:44,340 So if I go back to the context, I notice that I was not waiting for response. 73 00:04:44,730 --> 00:04:46,890 So we're just type here right now. 74 00:04:46,890 --> 00:04:52,110 Of course, our functionality is going to work where we have loading first and then once we get there 75 00:04:52,110 --> 00:04:56,040 back then, of course, we have all our items and our functionality worked. 76 00:04:56,460 --> 00:05:01,710 Where I have the total I have also the amount of items that are having a cart. 77 00:05:01,940 --> 00:05:04,630 And as they increase or decrease. 78 00:05:05,010 --> 00:05:07,410 Of course, these values are in sync.