Now that we've got our fecche posts action creator put together and our actions file We've also got
our reducer hooked up to it for the Fettes fetch post action.
So I think that the very last thing that we have to do here is wire up the fetch posts action creator
to the post index component.
So let's import our action creator will import the connect helper and get everything wired up at the
top of the file.
We'll start off by importing the connect over from re-act redux.
Next we'll import our action creator which is fecche posts from up one directory actions and then we'll
wire up the connect Helberg at the bottom.
Now in the past we've made use of the Kinect helper by defining the map dispatched to prop's function.
That's how we've been writing all of our code sofar throughout this course whenever we wanted to get
an action creator directly into a component so we can call it off the proper subject.
I want to show you another way in which we can wire up in-action creator in this way is a little bit
more of a shortcut.
So rather than defining a separate function for defining exactly how the action is going to be hooked
up we're going to first define our map state to prop's argument of no because we are not passing map
state to props and then as the second argument rather than passing in that extra function we're just
going to pass in the actual creator itself inside of an object.
So I'm going to say Fetch posts is fetch posts like so now you'll notice that the key and the value
are identical value names or property names.
So rather than saying Fetch pose colon fetch post.
We can use a little bit of E-6 to condense this down to just fetch posts like so bring up an action
Krater with this syntax instead of using that map dispatched to proper function is completely identical
in nature.
So we still have access to this Propst fetch posts inside of the component.
The reason that I first introduced Matt dispatched to prop's in that separate function format was because
there definitely are times where you want to use a separate function like for example if you want to
do some computation on exactly how you want to call the action creator ahead of time.
In addition it gives you a little bit more insight to what is going on behind the scenes Palissy in
the action creator like this right here is just asking.
Connect.
To do that extra step for us.
So that step is still occurring.
Connect is just taking care of it for us.
Moving forward we're probably going to generally be using this abbreviated syntax unless it looks like
there is a good reason to bind the dispatch function ahead of time and it really just so happens that
there might be inside this application and so we will get a good get some good experience of where we
still might want to do that separate breakout function look at.
So we've got our action creator hooked up to our component and now here's the real question.
Here's the real question.
When are we going to call the action Creator.
When are we going to attempt to reach out to the API and fetch our list of posts.
If you think back to all the previous applications we've worked on we've always fetched data after some
particular event occurs.
So maybe the user clicks on something or hovers on something or whatever it might be and we haven't
really ever put together a component where we said Hey as soon as we know that this component is about
to be rendered I want to go and attempt to fetch some data.
And that's really what we want to have happen this time around.
We really want to say the instant we know that the user is about to go to this component right here
or the components about to be shown on the screen we want to reach out to our API and fetch this list
of posts by calling the action creator.
So to take care of this we're going to make use of a re-act life cycle method.
A life cycle method is a function on a re-act component class that is automatically called by react.
Now there are several different lifecycle methods available but the one that we're going to work with
is called component did mount.
So let's define this method and we'll talk about exactly how it works.
So we're going define a separate function on here called component.
Did mount this function will be automatically called by react immediately after this component has shown
up inside the DOM.
That makes it a perfect location to go and fetch some data or initiate some one time loading procedure
if we might have anything that we want to do exactly one time.
When this component shows up on the page.
Now you might be thinking Well Stephen why would we want to go and fetch data after the component has
shown up on the screen.
Well in fact it doesn't really make a difference whether or not we call that action creator before or
after the component renders on the screen.
And the reason for that is that fetching our data is an asynchronous operation.
Whenever we reach out to that blog post API to fetch some data it takes some amount of time to fetch
that data and had it be returned to our browser and re-act does not have any concept of figuring out
how to say not render the component until after we do some pre-loading operation re-act is always going
to eagerly load itself or render the component I should say as soon as it can and it's never going to
say oh it looks like they're still loading some data here I better hold up in some fashion I just wait.
So even though there is another life cycle method that we could use called component will mount and
that's called before the component shows up in the DOM.
That's not necessarily a better place to call it because in either case it's always going to.
We're always going to end up with a component being rendered one time before we actually successfully
touch our data.
Again just because it takes some amount of time to make that API request now back to the specifics of
lifecycle methods again this is going to be called automatically by re-act specifically because I gave
it the name component did mount.
So if you make any typos in here like if you say capital C or Vee's say put into ns or something like
that.
If it's any other name whatsoever the lifecycle method will not be called.
It has to specifically be called component did mount with the correct spelling for react to actually
call this thing automatically.
OK so again because this function is called automatically one time when the components first rendered
that makes it an ideal location to kick off our data loading process.
So inside the lifecycle method we'll call this Propst dot fetch posts and that should kick off our data
loading process.
So at this point I think that we could do a little test inside the browser to make sure that everything's
working the way we expect.
If we refreshed the page right now we're not going to see any content appear on the screen because we're
still not getting a list of posts directly into its component and mapping over them and showing the
list of posts.
But we should at least be able to see a network request be issued.
So let's change over to our browser.
Open up the network tab and see how we're doing here.
OK.
So go back to my browser.
I want to open up the network tab and I'm going to make sure I filter by ex-aide requests.
So those are Ajax requests that are being issued to the API.
Now refresh the page and when everything is back up I can see that it looks like there was one request
made right here.
And as I clicked through a preview tab I see just an empty tray with no properties whatsoever which
is good.
That's what I would expect right now because we do not yet have any posts saved to this particular API
key.
So it looks like our initial data loading process is coming along pretty well.
Let's wrap up our post index component in the next section by making sure that we can render a list
of posts inside of here.
And we'll also put together a little bit of test dummy data on our API to get Arliss supposed to show
up.
So I'll see in just a second.