Unless video we took care of the first three steps here by creating a new action creator and then hooking
it up to our posts lets component so I can mark those in green to indicate that we're complete with
those.
We're not going move on to our next step here which is to make sure that our action creator has some
code inside of it to make an API request over to our API and actually get some data from it.
So let's get to it.
Now back when we were working on some reac projects earlier and said this course we already always created
a separate file and we created a new instance of X-posts inside that file that preconfigured ASIO's
with some base or L and some API key or something similar in every case.
We're going to take the same approach this time around where we pre-configured X-post to make a request
over to specifically this Jason placeholder API.
Now this time around we don't need a API key or anything like that.
So it's not super necessary to pre-configured X-posts or make an instance out of it.
In this case.
But I want to do the same thing this time around just to stay consistent.
All right so back inside of my SIRC directory I'm going to make a new folder called API eyes.
And then inside of there I'll make a new file called Jaison place holder Geass.
Now the reason that we are calling this Jaison placeholder is because that is the name of the service
we are using it is called japes on placeholder so now inside this new file I will import X-posts from
ASIO's and then I will export default ASIO's create and we are going to pass this thing.
A base you are l so that we don't have to specify the base you are.
Every single time that we make a request.
So to get my base or I'll I'll come back over to the documentation page at some placeholder type code
dot com and we'll go down to one of those requests.
So the resources right here I'm going to open up the posts and point and then this right here is going
to be the base or else that we want to use.
So I'm going to copy the URL inside my address bar and then I'll paste it inside of your as a string.
Now remember this is only supposed to have the base your l.
So in this case we don't want to put the slash post on here because we want to specify the end point
that we're trying to access when we actually make the request because in some cases we all want to get
slash posts in some other cases.
We will want to get our list of users with Flash users.
So I'm going to take off the slash users or slash posts at the very end.
I guess that's pretty much it.
So now we're going to flip back over to our actions indexed not just file.
I'm going to import Jaison placeholder from up one directory API is Jaison place holder like so.
So then we can use this pre-configured ASIO's instance to make a request inside of our action creator
itself.
So we're going to use that async await syntax we've seen before very very shortly.
MEMBER We are going to mark this function as async.
And then inside of here I will say a wait and then I will list out the actual request that we want to
make.
So I want to make a request to Jaison placeholder.
I want to make a get type request and I want to access the posts and point like so and then I'm going
to assign the result of all that to response.
And then finally I'm going to take that response object and assign it to the payload property like so.
OK so what you see right here looks like it is the correct thing.
All right.
We have an actual creator.
It makes a request and it's going to return in action object with our data on the payload property.
However this is not correct code.
So this right here this is a bad approach.
Now it's not bad because we're using a bad design or that we wrote code incorrectly or anything like
that.
It is bad because we are breaking the rules of redux.
We are specifically breaking the rules of an action creator.
Now before I tell you exactly what rules we are breaking I want to very quickly show you the error message
that we're going to get if we attempt to run this inside of our browser so I can flip back or it's my
application the page automatically refreshed and it automatically call that action creator we just put
together.
You'll see that we get this error message actions must be plain objects.
OK.
The second part of your message says use custom middleware for async actions.
Now you might recall that a little bit ago when we first installed a couple of dependencies into this
project we had installed redux thunk and I had said that this was a middleware to help us make requests
any redux application.
So we're going to eventually solve this issue by making use of redux thunk.
But before we do there is a lot of stuff that we'd love for you to understand about this action creator
and why it is not working as expected.
This is another one of those messages that you are probably going to see countless number of times.
And if you just understand the reason that we are seeing this message right now it's going to make your
life way easier down the line.
So let's take a pause right here.
When we come back the next section we're going to talk a couple of reasons about why our current code
is not working and it will start to discuss how we're going to fix it.
So quick pause and I'll see you in just a minute.