Now that we understand the entire and grok and Jason server side of things we can't turn our focus back
over to our application zone.
So you two quick diagrams to help you understand the flow of information inside of our app.
All right.
So this is what's currently happening inside of application right now in our application.
First loads up and we try to show say the index screen that index screen is going to be displayed by
react navigation index screen.
Then looks back up its component hierarchy.
It finds that blog post provider and it pulls out the list of blog posts from it.
The index screen then renders that list of blog posts.
And that's pretty much it.
Everything is good to go so this flow right here is going to change significantly as we start to add
in some network requests to actually fetch our list a blog post instead.
So let's take a look at a similar diagram that's slightly adjusted to account for the fact that we're
gonna reach out to that API.
All right.
So here's what's going to really go on from here moving on forward.
Our index screen and all of our other screens for that matter are still going to be displayed by react
navigation now inside of our index screen we're going to call a function that's going to make a request
to our Jason server and get our current list of blog posts from it.
Remember anytime we make a network request that takes some amount of time.
That's only on the realm of like milliseconds but it does take some amount of time.
So while the index screen and essentially our entire application is work waiting on a response to that
never agree to request the rest of the app is still going to go ahead and tried to charge on forward
and render whatever information is available.
So when our application first starts up we're going to have a empty list of blog posts because we've
not yet gotten a response from that Jason server so then at some future point time we're going to eventually
get a response.
So then at that point time we're gonna take the list of blog posts we just got back from the API and
we're going to somehow store them through our use reduce our hook remember use reducer is very similar
to you state it essentially has a piece of state that we want to change and modify inside of our app
in a general state refers to data so as soon as we store that list of blog posts our state has now changed
because our state change.
We're then going to re-enter the whole application index screen is then going to look back at that context
object it's going to see that the new list of blog posts is available the list we got back from the
API and so it's gonna take that list to blog posts and display them on the screen to the user.
That's the entire flow.
That's where we're going to now change our application to do.
All right so let's start making these changes right away.
The first thing we probably need to do is make sure that we have a function that we can call to make
a request to the Jason server.
So we'll focus on that first back inside my code.
Ed first begin by funding my S.R. see directory is inside there.
I'll make a new folder called API and then inside of API I'll make a new file called Jason server J.S.
inside of here.
We're going to import axioms and make a pre configured version of axioms.
So I'm going to import axis and then we'll do export default.
Axis dot create so inside of here there's really only one option that we want to configure on this axis
instance.
And that is the base you are El remember your l has capital you are L so inside of here we put the base
you l to our server.
Now this is where things start to get really hairy remember with and grok our base you all is gonna
change once every eight hours unless you start paying for an account.
So for me right now I can go back over to my end Greek window and for the next seven hours and 54 minutes.
This right here is my base you are L so I'm going to copy that and I'll throw it in as the base you
are L again you're going to have to come back to this thing in eight hours and you have to update that
base you are L if you don't update that your application is not going to work.
I know this is a pain but unfortunately this kind of is the reality unless you want to pay for an account.
There are some other services out there very similar to and grok that don't have a time limitation.
And so you can make use of them but they're a little bit less reliable.
I've tried using them in other courses and I found that a lot of people had some difficulty with them.
So even though Ingram has this very clear downside well it's still kind of the best of the bunch OK.
So we've now got an axial instance that is pre configured to talk to that you are L right there.
So then save that file and then I'll find my blog context dot J.S. file.
I went to import that Acciona instance that we just created at the top.
So import Jason server from up one directory API Jason server.
Now we can make use of this Acciona instance to make some requests inside of these action functions.
These are where we are going to make our requests from.
So back here inside this diagram we said we're going to call a function that's going to make a request
to the Jason server that's gonna be our action functions inside of our action functions we're going
to write out some code to make that request get the response and then dispatch an action with all of
the different blog posts that we just found now.
At present we don't actually have a action function to get a list of blog posts right now if we open
up our index screen.
This thing just reads our state directly off that context object because there's no need to actually
fetch any posts.
So we need to create a new action function that's going to make that request get the response and then
dispatch an action to write above add a blog post I'll add in a new function that I'll call get blog
posts.
This will be called with our dispatch and inside we'll return a function like so now inside this inner
function we probably want to make use of some async await syntax because we're going to be making a
network request.
So going to mark this function as async like so then inside of here we can make our network request.
So I'll say a wait Jason server dot get And remember if we want to get our list of blog posts we're
going to make this request to slash blog posts that will give us back all the different blog posts that
we have so I'm gonna make the request to slash blog posts like so remember any route that we put inside
of here will be contaminated with a base year L that we specified inside of our configuration over here
so we end up with this year l slash blog posts OK so that's going to give us some response that all
assigned to a variable like so and remember the response dot data property that's where our list of
blog posts is going to be.
So Jason or me in response that data will be an array of objects like so where every object is our blog
post at present we don't have any blog posts on our server but that's OK we'll eventually add some in
now I just noticed I made a little typo there on response so I'll fix that up really quickly and now
we can add in a call to our dispatch function when we dispatch we're going to add in all the data that
we just got back from that API and it will then be up to our reduced right here to capture that data
and return it so after getting back the response I'll call dispatch I'm going to put it in a type of
get blog posts and a payload of response dot data.
Okay.
So now we're going to dispatch this object right here.
Remember what happens whenever we call dispatch react is gonna take that object.
It's then going to automatically call our reducer.
That object is then going to be righted as the second argument to our reducer.
So now we need to add in a new case to our switch statement and watch for a type of get underscore blog
posts so inside of my reducer allowed in a case or get blog posts and whenever we see this action come
across we're going to return our new state value which is return action Dot.
Payload and that's pretty much it.
You'll notice in this case we did not do anything like put in a new array and say dot dot dot state
and so on.
The reason for that is that whenever we get a response back from the API our assumption is that the
API is always the total source of truth of information inside of our app.
So when we get this response back from the API that list of blog posts.
That is the total list of blog posts that's it and nothing else.
So we don't try to add this new response right here onto any existing state.
Instead we replace all of our existing state with it because like I said it is the total source of truth.
It is 100 percent correct and describes exactly what our information should be inside of our application.
OK.
So now the very last thing we have to do inside this file we just created that function get blog posts
and now we want to make sure it is available to all the different components inside of our app.
So to make sure it's available we need to go down to the very bottom find our object right here.
Remember that object is what makes of it this list of functions available to everything else inside
of our app.
So on there I'll add on a new key of get blog posts like some while we're looking down here.
One other thing I wanna mention is that remember when our application first starts up we created a kind
of dummy blog post right here because this third argument is our initial state.
Now that we have a list of blog posts that are going to be coming back from this API we really don't
need that initial data anymore.
It's going to delete that object and I'll leave behind just the empty array.
So our initial state when our application first loads up is a empty array which means we do not yet
have any blog posts at all.
So I'll save this and we'll take a quick pause right here.
The last thing we have to do is make sure that we call get blog posts from our index screen.
So we'll take care of that in the next video.