In the last section we realized that we needed a way to get our app to call an action creator to fetch 2
data whenever the list of blog posts is displayed to the user. 3
We decided that a good place to do that would be the component will mount lifecycle method in the post 4
index component. 5
Again this method has a lifecycle method so it is automatically called by react whenever this component 6
is about to be rendered to the DOM for the first time in this section. 7
We're going to hook up our fecche posts action creator to the component will mount method. 8
That way whenever the component is about to mount the data will automatically start to load up for us 9
as usual to give re-act are Riak component the ability to call an action creator. 10
We need to promote it from a component to a container. 11
Now in the past we moved all of our container components out to a separate folder but in this app most 12
of our components are going to end up as containers. 13
So we're just going to let all of our containers live inside of the components folder just to avoid 14
any confusion or remember the process for creating a container that can call action creators first import 15
connect at the top. 16
Then we import our action creator. 17
We define our map dispatched to prop's function and we connect it to our component. 18
So let's go ahead and do that. 19
Now at the top we'll do a few of our imports so import connect from re-act redux import bind action 20
creators from redux and we'll import fetch posts from actions index. 21
This is our action Krater that we want to call inside of component will mount here. 22
So at the bottom we'll define our function map dispatch to prop's we get our dispatch and then we will 23
return 24
bind action creators 25
fetch those with dispatch and then we'll go ahead and connect our component with our function here. 26
Map dispatched to prop's connect and remember the first argument to a connect function is usually map 27
state to prompts. 28
And in this case we don't have that function. 29
We've only got map dispatched to prompts so we will. 30
For a first argument here will pass and no again because we don't have any state that we want to map 31
over just yet. 32
We will in a little bit. 33
Not yet though. 34
So we'll say map dispatch to props and then a separate centre set a print CS will do. 35
Post index right here. 36
So remember this gives us access to this Propst fetch posts and so we can now go ahead and call it inside 37
of component will now. 38
This will save this stock prop's fetch posts. 39
Cool. 40
I think we're ready for a test in our browser. 41
Pull chrome back open here and swap over to our network tabs so we can see any network requests that 42
are being made. 43
Or go ahead and refresh and just see how we get our network requests showing up here. 44
Perfect. 45
Specifically we've got a post to the it's me a get request to the post and point. 46
I see the key on here. 47
We've got a status of 200. 48
And as a preview we got empty array back we don't have any posts yet so right now it's just an empty 49
array no posts. 50
Ok so this is looking pretty good. 51
Going to flip back over toward component here. 52
Now this is looking good. 53
You know we've got the code in here our map dispatched props just as we've defined before but there 54
is one factor that I want to do here. 55
In the past and all of our projects so far we've gone through this kind of boiler plate with Matt dispatched 56
to prop's here. 57
I want to show you a little bit of a shortcut that avoids this added complexity. 58
You know this added boilerplate right here. 59
I'm going to go ahead and delete this entire function right here and instead we're going to just pass 60
in an object that says fetch posts fetch posts like so. 61
So instead of going through the process of finding our action creators Sandino map dispatched the props 62
and all that stuff. 63
We're going to pass in just an object here that says fetch posts. 64
So what this does is it's just a shortcut it's a little bit little helper. 65
It's still going to give us access to this doc prob start fecche posts inside of our component but without 66
the added boilerplate of no map dispatch to profs. 67
Let's go ahead and refresh just to make sure it still works. 68
And yep it looks like it does we're still correctly calling the dispatch. 69
So this is great. 70
Nice little short cut that saves us some code. 71
There is one little refactor here we can use a little bit of E6 because we've got the same key as the 72
value here. 73
We can actually condense this down to just looking like so. 74
So we've got fetched PPOs surrounded by curly braces. 75
Remember this is E-6 syntax. 76
It's completely identical to writing fetch posts Colan fetch posts. 77
It's just a little bit of a shorthand with ESX. 78
OK so let's review here real quick. 79
Our strategy for fetching data is to dispatch an action whenever the post index component is about to 80
be rendered to the DOM pretty straightforward in our application right here. 81
This is a pretty easy decision. 82
We know exactly when we want to load our data whenever Post's index is about to be mounted to the DOM 83
. 84
You'll come to find on your own apps in the future that no good start to get a little bit more complicated 85
a little bit more complex. 86
Knowing when to fetch your data starts to get a little bit more confusing it's not always quite so black 87
and white as it is in this application. 88
So in your own application Duby you do put some careful thought into where you want to make your action 89
create or call. 90
You know where you want to start your data fetching process from. 91
Ok one last Sillery factor here. 92
We don't need our bind. 93
Action creators call it the top song and go ahead and delete that line. 94
Cool looks good. 95
Let's go ahead and continue in the next section