Our logic for fetching blog posts is complete but we're missing one crucial piece here we need to actually 2
call the action creator or to fetch the list of data. 3
There's nowhere in our app right now that's actually going invoke that action creator and start the 4
data fetching process. 5
In this section we're going to learn how to fetch our data and figuring out how and when to fetch data 6
in a read X app is actually kind of deceptively complicated. 7
So to tackle this topic we're going to go ahead and talk about what we did in the past for fetching 8
data in our weather application and then talk about a couple of different approaches that we could take 9
this time around. 10
So first I'm going to pull up a diagram of how we fetch started data in the weather app 11
in the weather application. 12
A user would type in some input here at the top so they'd type in say like San Francisco as the city 13
and then they would click the Search button. 14
In response we called an action creator which return in action and that action went through our middleware 15
or reducers et cetera. 16
And then our data flowed back into the app right here. 17
So the point is whenever a user clicks the button we had a very distinct event you know a very distinct 18
time in our application where we knew that. 19
OK. 20
Right now at this instant This is when we need to call our action creator. 21
Let's juxtapose that with a separate diagram of our blog posts application that we're about to make 22
here. 23
So this time around we don't really have the benefit of a simple click event to know when to call the 24
action Krait creator the place to call the action creator is really a lot more ambiguous. 25
All we know is that when we're navigating to the Post's index component that's probably a good time 26
to fetch our data. 27
You know we need to show some data on the page. 28
That's the time that we need to call that. 29
And once we call that action creator then we're going to go ahead and you know same process again. 30
Action flows to the middle where the reducers blah blah blah and new data flows into our state. 31
But the real question here is we need to fetch data whenever that your Ehle changes. 32
So to handle this we're going to make use of what's called a re-act lifecycle method a lifecycle method 33
is a function on a reata component class that is automatically called by react. 34
There are several different lifecycle methods but the one that we're going to work with is called component 35
will mount let's put together the implementation for this and then we'll go ahead and talk about you 36
know what it is what it's doing for us. 37
So back in our project I would open up our posts index file. 38
So right now this is just a functional component. 39
Let's go ahead and first refactor it to be a component class. 40
So at the top we'll pull off our component like so and then we'll replace this. 41
Let's just go ahead and delete all of it just so we can start from scratch and we'll do. 42
Class PPOs index extends components put in our render method and return div 43
list of blog posts and then at the bottom export default posts index. 44
OK. 45
So just to refactor from a functional component to a class based component. 46
Now the next thing we're going to do is we're going to define a lifecycle method on here called component 47
will mount. 48
This is the one that we're just we were just talking about about this. 49
So we'll define this method on the post index class. 50
So we'll say components will mount. 51
And right now we'll say console log. 52
This would be a good time to call an action creator 53
and we'll just say to fetch those like so. 54
OK let's go ahead and save this and I can open up my browser here make sure we got our consul nice and 55
big and then refresh. 56
And so we see this would be a good time to call an action critter to fetch posts. 57
OK. 58
So you see the lot of pop up. 59
What happens here again component will mount is a lifecycle method. 60
If we define a method specifically called component will mount re-act will call this automatically whenever 61
our component is about to be rendered to the DOM for the first time. 62
It will not be called on subsequent re renderers though so because it's only called once. 63
This would be a great place to place our action Kreator to go and fetch our data. 64
So again the point here is that in our previous application there was a very easy location to decide 65
where to fetch our data. 66
This time around it's a little bit more ambiguous. 67
You know we don't really know where the best place to put our data fetching process where to kick that 68
that off from. 69
And so for this application we're going to say whenever our Post's index component is about to mount 70
please go and fetch our data for us. 71
OK. 72
Let's go ahead and in the next section we'll replace the consulate here with our action creator. 73
I'll see it there.