I think we're in good shape.
We have initial structure for Douceur, we have actions, our variables.
So I think we can continue in context, jazz, watching our stories.
So we will dispatch that lowering when we invoke fetched stories.
And of course, I would want to set up also my functionality where we're going to use Futch API again
for no particular reason.
I'm just going to use try catch because I would want to catch the error.
Of course, I'm going to go with a log and then error and then in the try block we're going to go with
the response.
So Consed responds and that is equal to await.
And of course I can use a wait since we already use async syntax and then we'll go fetch and now we
want to pass in New York.
So keep in mind we will construct this.
Yoro here in the U.S. for the time being is just a parameter and I pass it and and of course I'm going
to go for my data on the data is equal to it and then a response and dot jasa.
So of course, we want to transform my response and I would want to cancel log the data and now where
I have the use effect because I would want to pass in the euro.
So what is going to be the query and also will the page.
So again, remember, Page was optional, but since will have buttons that control which page we're
getting, I would want to right away add the page to my query so we curl up in the emotional state.
I'm going to add some values.
First of all, there's going to be hit.
Remember, hits is something that we're getting back.
Renschler and for time being, it is just going to be empty, right?
Then we're going to go with some kind of query.
So there's going to be a default query.
In my case, I'm going to go with the react and then two more values.
What is going to be the default page?
And that is going to be zero.
And then also I would want to check what is the number of pages.
And again, the default value will be and be and then pages is equal to zero.
Remember, when we fetch for stories, we have some kind of result.
So how many pages are there in total, which in most cases is going to be, I believe, 50?
So then I save and then we scroll down over here and where we have stories now, I would want to construct
the correct end point.
I have this one that uses search.
And, of course, we need to the query as well as the page.
Of course, by default is going to be zero.
So we scroll down over here, we go back to the template literal and start by accessing the API endpoint.
By the way, this bugs me a little bit, so I'm going to go with API and then underscore endpoint.
So scroll down and I'll change the value over here as well.
API underscore and point.
Now again, you don't have to do that if you don't like it.
And then if you remember we had to have search then question mark and then query and page.
Now if you want to double check that.
Remember when we were constructing the URL here.
Well, that was the pattern, correct?
So we're good and point, then we go with query and in this case, our own axis, of course, the state
value, correct.
So I go state and then query by default.
Of course, that is react.
And then I'm going to do the same thing where I go with and and the page will be equal to that page
is zero.
So that's my default state.
And then page eventually there is going to be a few dependencies here, but for the time being we don't
need to worry about that.
So we save.
And of course now once I can fetch for the stories, then I would want to say, well, what is my data?
So I'm going to navigate to the bigger brother in law.
And.
So this is my response.
It is an array.
It has a value of 20 stories.
Then I have a number of hits.
So what is the total page, which is zero and then number of pages.
So how many pages total.
So now, of course, instead of just logging, I would want to dispatch.
So first I dispatch settlor.
Correct.
Now once I've got my data, I would want to dispatch another action.
And that action, of course, will change the value here in the state.
So initially it is empty.
And now, of course, will set it equal to whatever we're getting back.
But remember, we always, always need to do that through the reducer, meaning we'll have to dispatch
action, will have to pass some data, and then in reducer will change this value.
We're not going to go directly and change this value in this initial state.
So here's what we need to do.
We're going to go with dispatch.
We need to come up with a name.
And my case, I already came up with a name and that one is set stories.
So if you're using variables, just look for this one.
I'm going to scroll down.
Remember, we need to pass in the type first and then we go set stories now the gotcha here is that
there's two things that I would want to add to my state.
Not only I would want to get the hits, but I also would want to see, well, what is the total amount
of pages?
And I want to bring in the number of pages, so here where we have types of stories, I'm going to go
with another property.
So when I'm dispatching, I for sure need to have type property, but I can also add more properties.
So in this case, there's going to be a payload property.
And in that payload property, I'm going to pass in two things that are going to be a property with
the name of it and the value will be data.
And then let's remember, this is what we're getting back from the API.
I have the object that is represented with data and then property holds Mairi.
So I go with data and then DOT hits.
And then also I would want to set up a number of pages.
So comma another property and be.
Pages.
So how many pages total and that is equal to data and then and B pages.
So we set this up and now, of course, we just need to navigate to the producer and handle that action.
So let's do it.
We're going to navigate to producer the moment.
Notice we have a big fat Kopplin said stories, action type.
It's not matching.
Why is it not matching?
Because, of course, we haven't set up the functionality in our producer.
So we have one case for set loading.
And now let's have another one, let's say case and then set stories again.
We just need to look for the same variable name.
And what is going to be the functionality here?
Well, we're going to return the whole state, so I'm going to go with DataDot and then State and I'm
going to start by setting is lowering is false.
Correct.
Because remember, when we go into that loading, of course, we said it's true, but then when I get
my data back to I want loading to be true.
Well, no, because then I would want to display those stories.
Correct.
So we're going to go here with is loading and also equal to false.
And then two things I would want to set up my head.
So instead of this empty array, of course, I would want to have some kind of value.
Correct.
And the second thing is going to be, well, how many pages total?
Because, of course, that will be important later when we have those buttons that look for different
pages.
So introducer, not only we have is loading, will also say that we would want to change the hits and
that one will be equal to action and then payload.
Because remember, in the context when I'm setting up my dispatch, I have little prop..
It is an object and in that object I have it.
And the number of pages, that's why we got a long way of action.
Payload and the property name was it.
And also in the state, I would want to change the number of pages so and be pages and then we go with
action and payload and of course number of pages.
So for the time being we just change from loading to storage component.
OK, don't worry.
Of course we'll display those stories in the upcoming videos.
What I would want to check right now is my state.
So I'm going to navigate two components and then I have my AMP provider and then by default, we're
going to have array of zero number of pages zero.
But then when we're successful, of course, we change these values.
Now, hit is 20, is loading becomes false and the number of pages becomes 50.
So you can see that these numbers are changing.
Now, of course, we can move on to the next step.