1 00:00:07,910 --> 00:00:09,080 Welcome back. 2 00:00:09,110 --> 00:00:15,190 In the previous video, we were able to create an action to fetch a user profile. 3 00:00:15,200 --> 00:00:22,340 So let's go ahead and then dispatch that action and pull the data for a particular user, meaning the 4 00:00:22,340 --> 00:00:24,200 profile of a user. 5 00:00:24,200 --> 00:00:26,170 So how are we going to do it? 6 00:00:26,180 --> 00:00:32,450 First thing is that we need to know the component where you want to have that data and for us on the 7 00:00:32,450 --> 00:00:33,170 dashboard. 8 00:00:33,170 --> 00:00:38,900 So we need to go to the dashboard component and account dashboard. 9 00:00:38,900 --> 00:00:45,260 And since this dashboard is rendered by the app, we have access to our contexts. 10 00:00:45,260 --> 00:00:48,890 So here let's see how we are going to consume that context. 11 00:00:48,890 --> 00:00:53,960 So bring in use contexts as we did before and here we go. 12 00:00:53,960 --> 00:01:02,900 And I also need the context, so I need to reserve it so that I can have the auto input inside the context. 13 00:01:02,900 --> 00:01:06,590 And here is the context and I want this one. 14 00:01:06,590 --> 00:01:12,410 So again, let's require that as of contexts and perfect. 15 00:01:12,410 --> 00:01:20,810 So here you're going to create instance of the use context and here we go, then I'll pass in the context. 16 00:01:20,810 --> 00:01:24,980 So what comes back is the data I want for this component. 17 00:01:24,980 --> 00:01:27,890 So for now, let's make it a stage equal to that. 18 00:01:27,950 --> 00:01:34,370 So on this stage it contains the properties we pass into the value of this one. 19 00:01:34,370 --> 00:01:39,470 So what we want is the profile and then the fetch profile action. 20 00:01:39,470 --> 00:01:44,990 So here I can copy that and here I can structure that as this. 21 00:01:44,990 --> 00:01:48,440 And then they common I'm going to be the profile. 22 00:01:48,440 --> 00:01:56,390 So if you console.log the profile, you're going to see undefined because this option has to be called 23 00:01:57,560 --> 00:01:58,250 file. 24 00:01:58,940 --> 00:01:59,510 All right. 25 00:01:59,510 --> 00:02:02,030 So how can we dispatch the action? 26 00:02:02,030 --> 00:02:07,880 Since you want to call this action automatically, we are going to use use effect. 27 00:02:07,880 --> 00:02:11,060 So here we go, bring use effect here. 28 00:02:11,210 --> 00:02:16,970 And the next step is that let's dispatch the action dispatch 29 00:02:19,910 --> 00:02:23,120 and here we go, use effect. 30 00:02:25,490 --> 00:02:33,140 And then the second argument as that, and inside here you are going to dispatch the action and here 31 00:02:33,170 --> 00:02:37,710 we are going to make this first profile action and that is it. 32 00:02:37,730 --> 00:02:42,290 Let me bring this one down here and let's see if we're going to see the user. 33 00:02:42,410 --> 00:02:42,860 All right. 34 00:02:42,860 --> 00:02:46,820 So moment of truth where we got undefined. 35 00:02:46,820 --> 00:02:51,380 The problem might be the way we are dispatching the action. 36 00:02:51,380 --> 00:02:52,790 So let's check the code. 37 00:02:52,790 --> 00:02:57,470 Well, it means that there is something wrong about this, but let's see. 38 00:02:57,860 --> 00:03:00,500 So let's see on the status if you have it. 39 00:03:01,010 --> 00:03:04,490 Okay, let's grow on the data. 40 00:03:04,610 --> 00:03:06,380 We do have something like title. 41 00:03:06,390 --> 00:03:08,210 That is why you couldn't get that one. 42 00:03:08,330 --> 00:03:17,540 So if you want to use that one, unless we add that one to the API or we can remove this one and check 43 00:03:17,540 --> 00:03:18,980 if you have data. 44 00:03:20,460 --> 00:03:21,210 Yes. 45 00:03:21,970 --> 00:03:22,490 Good. 46 00:03:22,510 --> 00:03:24,070 So now let's see. 47 00:03:24,430 --> 00:03:25,890 I think we move this one. 48 00:03:25,900 --> 00:03:26,410 Great. 49 00:03:26,410 --> 00:03:27,640 So now let's see. 50 00:03:28,210 --> 00:03:30,250 And now we have it here. 51 00:03:30,260 --> 00:03:32,650 Let's see it on line number 13. 52 00:03:32,980 --> 00:03:36,490 Not that we have the success response. 53 00:03:36,550 --> 00:03:38,740 What about error case? 54 00:03:38,770 --> 00:03:44,500 Let's try to trigger some error and let's see how we can handle that one also. 55 00:03:44,650 --> 00:03:48,430 So let's get back to the of context, which is this one. 56 00:03:48,430 --> 00:03:53,320 And to be able to throw an error, let's send some invalid token. 57 00:03:53,320 --> 00:03:59,050 So let's remove this one and then here we can send any token here. 58 00:03:59,110 --> 00:04:03,610 So now if I save this one, let's check it out. 59 00:04:03,610 --> 00:04:05,950 And here we have a strange error. 60 00:04:05,950 --> 00:04:11,350 Meaning on codes, improvements, meaning that we are not handling the error work. 61 00:04:11,470 --> 00:04:17,500 So let's get back to the the function to check and this is the function. 62 00:04:17,500 --> 00:04:19,899 So let's see where we are not handling the error. 63 00:04:20,079 --> 00:04:21,790 So let's see. 64 00:04:22,270 --> 00:04:23,770 Oh, bottom side. 65 00:04:23,770 --> 00:04:24,370 Sorry, guys. 66 00:04:24,370 --> 00:04:26,410 I believe maybe you guys saw it. 67 00:04:26,440 --> 00:04:30,550 I need to put the logic inside the try. 68 00:04:30,730 --> 00:04:33,310 You can see that now that error is gone. 69 00:04:33,310 --> 00:04:40,810 So the next step is that I want to have access of the error inside my component so that I can display 70 00:04:40,810 --> 00:04:42,310 this one dynamically. 71 00:04:42,310 --> 00:04:44,350 So how are you going to do it? 72 00:04:44,350 --> 00:04:48,460 So here we can send the entire state here. 73 00:04:48,460 --> 00:04:54,340 Remember, this state contains the profile, the user of which is this one. 74 00:04:54,910 --> 00:05:01,750 And here if the request for fetch and user profile failed, we are going to add the error to this. 75 00:05:01,750 --> 00:05:11,560 So we can specifically send the error and we can get it from state dot error and that is it. 76 00:05:11,560 --> 00:05:15,280 Remember this entire state on that we have the error. 77 00:05:15,580 --> 00:05:18,340 So next is inside the account dashboard. 78 00:05:18,340 --> 00:05:20,680 I can grab the error. 79 00:05:20,890 --> 00:05:23,890 So let's console.log the error and let's see. 80 00:05:24,870 --> 00:05:26,210 And here you go. 81 00:05:26,220 --> 00:05:28,860 You can see we have invalid token. 82 00:05:28,860 --> 00:05:34,290 So now we can make some conditions to render this great. 83 00:05:34,290 --> 00:05:36,300 So here we go. 84 00:05:36,300 --> 00:05:44,040 So inside the dashboard, which is this one, before we can even render this once, let's make a conditions 85 00:05:44,040 --> 00:05:44,610 first. 86 00:05:44,610 --> 00:05:46,200 So here we go. 87 00:05:46,380 --> 00:05:48,720 So here we can make a check. 88 00:05:48,720 --> 00:05:56,100 That is, if we have error, then go ahead and then display the error component in this case, which 89 00:05:56,100 --> 00:05:57,150 is this one. 90 00:05:57,150 --> 00:06:02,220 So I'll cut this one from here as that Arrows column. 91 00:06:02,250 --> 00:06:05,550 Go ahead and then display this component. 92 00:06:05,550 --> 00:06:11,280 So I'll put them in a fragment and here we go. 93 00:06:11,430 --> 00:06:12,000 Perfect. 94 00:06:12,000 --> 00:06:12,960 Now let's see. 95 00:06:13,260 --> 00:06:19,980 We can see that we have an error by in case I provide the right token. 96 00:06:19,980 --> 00:06:22,110 So let me go and do this one. 97 00:06:22,380 --> 00:06:28,380 So here, let's remove this one and let's bring back the States. 98 00:06:29,920 --> 00:06:33,730 Dart user of dart token. 99 00:06:34,030 --> 00:06:36,010 Now let's save it analysis. 100 00:06:36,250 --> 00:06:37,240 Let's refresh it. 101 00:06:37,240 --> 00:06:41,020 And this time around we have the rare component.