Welcome back.
In the previous video, we were able to create an action to fetch a user profile.
So let's go ahead and then dispatch that action and pull the data for a particular user, meaning the
profile of a user.
So how are we going to do it?
First thing is that we need to know the component where you want to have that data and for us on the
dashboard.
So we need to go to the dashboard component and account dashboard.
And since this dashboard is rendered by the app, we have access to our contexts.
So here let's see how we are going to consume that context.
So bring in use contexts as we did before and here we go.
And I also need the context, so I need to reserve it so that I can have the auto input inside the context.
And here is the context and I want this one.
So again, let's require that as of contexts and perfect.
So here you're going to create instance of the use context and here we go, then I'll pass in the context.
So what comes back is the data I want for this component.
So for now, let's make it a stage equal to that.
So on this stage it contains the properties we pass into the value of this one.
So what we want is the profile and then the fetch profile action.
So here I can copy that and here I can structure that as this.
And then they common I'm going to be the profile.
So if you console.log the profile, you're going to see undefined because this option has to be called
file.
All right.
So how can we dispatch the action?
Since you want to call this action automatically, we are going to use use effect.
So here we go, bring use effect here.
And the next step is that let's dispatch the action dispatch
and here we go, use effect.
And then the second argument as that, and inside here you are going to dispatch the action and here
we are going to make this first profile action and that is it.
Let me bring this one down here and let's see if we're going to see the user.
All right.
So moment of truth where we got undefined.
The problem might be the way we are dispatching the action.
So let's check the code.
Well, it means that there is something wrong about this, but let's see.
So let's see on the status if you have it.
Okay, let's grow on the data.
We do have something like title.
That is why you couldn't get that one.
So if you want to use that one, unless we add that one to the API or we can remove this one and check
if you have data.
Yes.
Good.
So now let's see.
I think we move this one.
Great.
So now let's see.
And now we have it here.
Let's see it on line number 13.
Not that we have the success response.
What about error case?
Let's try to trigger some error and let's see how we can handle that one also.
So let's get back to the of context, which is this one.
And to be able to throw an error, let's send some invalid token.
So let's remove this one and then here we can send any token here.
So now if I save this one, let's check it out.
And here we have a strange error.
Meaning on codes, improvements, meaning that we are not handling the error work.
So let's get back to the the function to check and this is the function.
So let's see where we are not handling the error.
So let's see.
Oh, bottom side.
Sorry, guys.
I believe maybe you guys saw it.
I need to put the logic inside the try.
You can see that now that error is gone.
So the next step is that I want to have access of the error inside my component so that I can display
this one dynamically.
So how are you going to do it?
So here we can send the entire state here.
Remember, this state contains the profile, the user of which is this one.
And here if the request for fetch and user profile failed, we are going to add the error to this.
So we can specifically send the error and we can get it from state dot error and that is it.
Remember this entire state on that we have the error.
So next is inside the account dashboard.
I can grab the error.
So let's console.log the error and let's see.
And here you go.
You can see we have invalid token.
So now we can make some conditions to render this great.
So here we go.
So inside the dashboard, which is this one, before we can even render this once, let's make a conditions
first.
So here we go.
So here we can make a check.
That is, if we have error, then go ahead and then display the error component in this case, which
is this one.
So I'll cut this one from here as that Arrows column.
Go ahead and then display this component.
So I'll put them in a fragment and here we go.
Perfect.
Now let's see.
We can see that we have an error by in case I provide the right token.
So let me go and do this one.
So here, let's remove this one and let's bring back the States.
Dart user of dart token.
Now let's save it analysis.
Let's refresh it.
And this time around we have the rare component.