In this video we're going to start working on fenceposts and users.
Remember the goal here is to call fetch posts.
Wait for it to get all of the posts and retrieve them and whatnot.
We're then going to get the list of posts and so on.
All that good stuff.
All right so let's flip back over to our action creator file and we're going to create this new action
creator at the very top.
So I going to say expert Konst fetch posts and users like so.
All right and we're going to fire this up with redux thunked just as we have with all the other action
creators as well.
We're going to use that same kind of complicated kind of look and syntax here.
So we're going to have one arrow function that returns an arrow function that is async.
So it's going to have some syncopate syntax in it and we're going to again received that argument of
dispatch so that we can dispatch our own actions inside of here.
OK so here's where things get just a little bit tiny bit challenging.
OK.
Inside of fecche posts and users we're going to call fetch posts and we are going to call that user
multiple times.
Our application like over react code all of our components are going to call this action Creator alone.
They are no longer going to call the other two action critters we have.
So we're not going to expect that our component is going to call fecche posts and fetch the list of
posts then eventually dispatch them.
So what I'm trying to say here is that when we call fecche posts in users that is the only action creator
that you and I are going to call in so we need to make sure that when we eventually delegate to fetch
post to actually go and fetch the posts we handle that action creator appropriately.
And what I mean by that is we need to make sure that this action create right you're still has some
action that is going to get dispatch at the end of the day.
So in other words you and I cannot just call like fetch posts and say OK like let's get our posts and
just kind of like leave it there.
Instead we need to make sure that when we call this action creator whatever action or whatever function
it returns gets dispatched as well.
So it goes into that entire pipeline of being dispatch goes through the middle wheres and eventually
goes into the reducers.
So long story short what Im really saying here is that when we call fecche post we have to pass the
result of calling that thing into our dispatch function.
So we are now kind of manually dispatching this action creator or the result of calling the action creator.
Now think about what happens we're going to call fecche post right here.
That's going to invoke this function.
That's going to return this inner function right here.
So we are going to dispatch a function.
Remember whenever we dispatch a function redux thunk is going to pick it up and automatically invoke
it.
It's a redux thunk is going to see this inner function right here and invoke it and pasand dispatch
as the first argument.
So then this inner function is going to make a request over to our API get the list of posts and then
it's going to dispatch its own action internally and start that entire process of updating our reducers.
So again whenever we call an action creator from inside of an action creator we need to make sure that
we dispatch the result of calling the action creator.
OK so that code right there is going to work exactly as we would expect.
So were going to call fecche posts fetch the list of posts and then eventually update our reducer.
So now we want to go on to the next step here which is to get the list of posts.
And this is where the second challenge starts to come in.
Remember whenever we call fetch posts that is going to initiate a asynchronous request over to our API
and get our list of posts.
So we need to somehow make sure that we do not attempt to get at our list of posts that have been fetched
until this action Krita right here has completed and has fetched all the appropriate data.
So to do so this is going to be a little bit crazy.
We're going to put the await keyword in front of it.
So the reason that we put the await key word right there it's going to make sure that when we dispatch
that action creator and this inner function eventually gets called the Awake key word right here is
going to essentially make sure that we wait for this API request to be completed before we move on and
do anything else inside of our new action creator right here.
All right.
I know this is a little bit intense but honestly those two steps are the hardest part to understand.
So one more quick review.
Again we color action creator.
That's going to return the inner function.
We're going to make sure we dispatch that things so this inner function is going to show up inside of
redux thunk and get invoked with dispatch then to make sure that we don't try to do any other logic
inside of our actual creator until we have successfully fetch that list of posts.
We're going to make sure that we put the Awake key word right here in front of that entire call and
that's going to make sure that we're not going to progress down to the next line of code right here.
And so we have successfully fetched a list of posts and dispatched the action for it.
Now at this point I feel like it would be really valuable to maybe put a debugger statement or a console
log inside of this action creator and then attempt to call it just to make sure we really understand
the idea of what's going on here.
So I'm going to put down about a console log right here and I'll say fetched us and then I'm going to
put a council log right above and I'll say about to fetch posts like so and then I'm going to flip back
over to one of my components and we're going to wire up the fenceposts and users action creators so
that this thing actually gets cold.
So we can see these console locks in action.
So to do so when I flip back over to my post list component at the very top I will make sure I import
this new action creator called fetch posts and users and then inside of this component did mt life cycle
method right here.
I'm going to remove the old action creator and instead I will call this stop Propst not fetch posts
and users and then finally will go down to the very bottom of the file and hook up that action creator
to our connect function as well.
So down at the very bottom of find connect we don't need to wire fetch posts anymore.
Instead we will wire up fecche posts and users.
And while we're at it we can actually remove the import for fetch posts back up at the top as well because
we don't really need that action creator anymore.
OK so let's save this and we'll see if we get those console logs.
Successfully.
All right.
I'm going to flip back over and I'll open up my console
refresh and you'll see that I get I do get a 404 right here.
This is to be expected.
You probably do not see a 4 or 4 you might see one.
You'll notice that this is trying to fetch users with one 999.
So in reality that based on placeholder and point it actually has the ability to support people posting
data to that API.
So every now and then you're going to see kind of a strange record appear right there so you can completely
ignore my 404 right there.
Chances are you are not seeing the same thing.
Much more importantly you'll notice that we have the two console logs inside of here and we still see
our list of posts appearing on the screen.
So we see about to fetch posts and then I don't know if you notice it but when we saw that console log
appear there was the slightest little delay where we were waiting for that list opposed to fetch and
then processed by our reducers and then we saw the second console log.
Let's do that again really quickly here.
So I'm going to refresh and you'll see the first one and then there's the tiniest little delay and then
you saw the second one appear.
So that means that this a weight syntax right here is definitely making sure that we do not progress
down to the next line of code until we have successfully fetch the list of posts dispatched an action
in updated are reduced her with all those different fecche posts.
We spent a pretty good amount of time on this and I hope it is at least somewhat clear.
Let's take a pause right here and we'll start to finish up this new revamped action creator in the next
video.