Excellent work, all of our functionality works part.
Now would want to make it a bit more interesting where I would want to show you how we can fetch data
using use reducer.
So let's go back to our context.
And essentially the idea is exactly the same like we did previously.
We will still have the use effect.
So still fresh in the same way.
Now, the difference is going to be that once we get the data back, then, of course, I would want
to dispatch and add it to my card.
So essentially add it to my step.
As far as the URL, I have it over here.
So if you want to check it out, just navigate the bigger browser, copy and paste and nerdish.
We're going to have an array of four items.
Now, I added four items just so you can clearly see that we're pitching there.
So in our hard coded values, we have three and then once we fudge, we've got four.
All right.
So we already know the drill.
We will need to set up the function.
And I think I'm going to do it over here in second and I'll call this fetch data.
And as far as the parameters, I don't need any, but I would want to dispatch loading now, why do
I want to dispatch loading?
Because once I start watching, which I want to say, hey, listen, I'm loading my data now, of course,
at the moment we don't take care of that energy, sir.
Don't worry.
We will not dispatch online type ears and land loading.
OK, beautiful.
So we're loading while we're watching and let's set up the functionality where we go with CONSED.
And you know what I forgot to add here a sink since of course I'm going to use the await functionality,
I'm going to go with the response I want is equal to await and then fetch.
We pass in the URL.
Once we've got the response I can go with CONSED and the card that I want is equal to response that
Jason online wants.
I've got my card now.
I would want to pass it in to my dispatch so we have one dispatch for loading and then there's going
to be second one for displaying the items.
So we go for dispatch, then we have the object and then we have to type and I'll call this display
and line underscore items like so.
And now of course I would want to go with payload so and then I'll pass in the car.
So whatever I'm getting back from the API, I'll pass it as a payload into the producer.
Let's save it.
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
year's effect, since we know that we can set up as many use effects as we would want.
And of course I'll have empty dependency array and I'm just going to say fetch and then data.
And of course, I would need to invoke it.
So once I invoke the function and of course we navigate to the register and let's start with the loading
one.
So what do I want to do when I'm loading?
Well, pretty simple.
I would want to first check for that type somewhere to say if I'm an action type is equal to a loading,
then of course I would want to set my loading property to.
True.
So we're going to go with return on that.
And then we have the state, of course, and it is loading.
Unloading is equal to true.
We save it.
And then right away, the moment we start fetching that we have the line.
Now the next time you're displaying the items.
Right.
So we'll go it if and then action type No.
One is equal to display and underscore items.
And now, of course, again, I would want to return the whole state.
Some would say state like so and not comma.
And I would want to set my cart to the action.
And then why won't?
Because that is where my car is, the one that I fetched from the FBI.
And of course, since I don't want to have the loading anymore, I don't need to call another dispatch.
I can simply say, yeah, in this case I set loading Patro.
So let's add comma and say loading is equal to force.
And then of course the moment we get our data back we should see the car.
Now the problem is going to be that we're going to get a big fat error simply because I wasn't paying
attention.
So if I go back to the context, I notice that I was not waiting for response.
So we're just type here right now.
Of course, our functionality is going to work where we have loading first and then once we get there
back then, of course, we have all our items and our functionality worked.
Where I have the total I have also the amount of items that are having a cart.
And as they increase or decrease.
Of course, these values are in sync.