1

00:00:01,440  -->  00:00:07,170
In the last section we realized that we needed a way to get our app to call an action creator to fetch

2

00:00:07,170  -->  00:00:10,940
data whenever the list of blog posts is displayed to the user.

3

00:00:11,070  -->  00:00:17,370
We decided that a good place to do that would be the component will mount lifecycle method in the post

4

00:00:17,460  -->  00:00:19,440
index component.

5

00:00:19,440  -->  00:00:24,720
Again this method has a lifecycle method so it is automatically called by react whenever this component

6

00:00:24,750  -->  00:00:28,860
is about to be rendered to the DOM for the first time in this section.

7

00:00:28,860  -->  00:00:34,740
We're going to hook up our fecche posts action creator to the component will mount method.

8

00:00:34,740  -->  00:00:40,140
That way whenever the component is about to mount the data will automatically start to load up for us

9

00:00:41,310  -->  00:00:46,220
as usual to give re-act are Riak component the ability to call an action creator.

10

00:00:46,350  -->  00:00:51,060
We need to promote it from a component to a container.

11

00:00:51,060  -->  00:00:57,330
Now in the past we moved all of our container components out to a separate folder but in this app most

12

00:00:57,330  -->  00:00:59,770
of our components are going to end up as containers.

13

00:00:59,790  -->  00:01:04,740
So we're just going to let all of our containers live inside of the components folder just to avoid

14

00:01:04,740  -->  00:01:13,080
any confusion or remember the process for creating a container that can call action creators first import

15

00:01:13,110  -->  00:01:15,600
connect at the top.

16

00:01:15,600  -->  00:01:17,660
Then we import our action creator.

17

00:01:17,820  -->  00:01:23,450
We define our map dispatched to prop's function and we connect it to our component.

18

00:01:23,490  -->  00:01:24,680
So let's go ahead and do that.

19

00:01:24,680  -->  00:01:36,330
Now at the top we'll do a few of our imports so import connect from re-act redux import bind action

20

00:01:36,690  -->  00:01:48,260
creators from redux and we'll import fetch posts from actions index.

21

00:01:48,420  -->  00:01:53,070
This is our action Krater that we want to call inside of component will mount here.

22

00:01:53,760  -->  00:02:05,460
So at the bottom we'll define our function map dispatch to prop's we get our dispatch and then we will

23

00:02:05,460  -->  00:02:06,150
return

24

00:02:08,680  -->  00:02:11,280
bind action creators

25

00:02:14,490  -->  00:02:24,640
fetch those with dispatch and then we'll go ahead and connect our component with our function here.

26

00:02:24,690  -->  00:02:32,490
Map dispatched to prop's connect and remember the first argument to a connect function is usually map

27

00:02:32,970  -->  00:02:34,120
state to prompts.

28

00:02:34,120  -->  00:02:35,670
And in this case we don't have that function.

29

00:02:35,670  -->  00:02:39,930
We've only got map dispatched to prompts so we will.

30

00:02:39,930  -->  00:02:45,060
For a first argument here will pass and no again because we don't have any state that we want to map

31

00:02:45,060  -->  00:02:46,080
over just yet.

32

00:02:46,350  -->  00:02:47,390
We will in a little bit.

33

00:02:47,460  -->  00:02:48,660
Not yet though.

34

00:02:49,020  -->  00:02:57,110
So we'll say map dispatch to props and then a separate centre set a print CS will do.

35

00:02:57,120  -->  00:02:59,010
Post index right here.

36

00:02:59,380  -->  00:03:07,540
So remember this gives us access to this Propst fetch posts and so we can now go ahead and call it inside

37

00:03:07,550  -->  00:03:08,990
of component will now.

38

00:03:09,380  -->  00:03:13,780
This will save this stock prop's fetch posts.

39

00:03:13,860  -->  00:03:15,440
Cool.

40

00:03:16,080  -->  00:03:19,000
I think we're ready for a test in our browser.

41

00:03:19,060  -->  00:03:25,200
Pull chrome back open here and swap over to our network tabs so we can see any network requests that

42

00:03:25,200  -->  00:03:26,920
are being made.

43

00:03:27,000  -->  00:03:32,580
Or go ahead and refresh and just see how we get our network requests showing up here.

44

00:03:32,580  -->  00:03:33,680
Perfect.

45

00:03:33,870  -->  00:03:40,120
Specifically we've got a post to the it's me a get request to the post and point.

46

00:03:40,320  -->  00:03:41,820
I see the key on here.

47

00:03:41,910  -->  00:03:43,670
We've got a status of 200.

48

00:03:44,040  -->  00:03:50,100
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

00:03:50,100  -->  00:03:52,140
array no posts.

50

00:03:53,100  -->  00:03:56,070
Ok so this is looking pretty good.

51

00:03:56,210  -->  00:03:58,860
Going to flip back over toward component here.

52

00:03:59,250  -->  00:04:00,840
Now this is looking good.

53

00:04:00,840  -->  00:04:05,950
You know we've got the code in here our map dispatched props just as we've defined before but there

54

00:04:05,950  -->  00:04:08,870
is one factor that I want to do here.

55

00:04:08,880  -->  00:04:14,340
In the past and all of our projects so far we've gone through this kind of boiler plate with Matt dispatched

56

00:04:14,340  -->  00:04:15,960
to prop's here.

57

00:04:16,070  -->  00:04:20,320
I want to show you a little bit of a shortcut that avoids this added complexity.

58

00:04:20,320  -->  00:04:23,100
You know this added boilerplate right here.

59

00:04:23,100  -->  00:04:30,870
I'm going to go ahead and delete this entire function right here and instead we're going to just pass

60

00:04:30,870  -->  00:04:38,030
in an object that says fetch posts fetch posts like so.

61

00:04:38,220  -->  00:04:45,120
So instead of going through the process of finding our action creators Sandino map dispatched the props

62

00:04:45,120  -->  00:04:46,150
and all that stuff.

63

00:04:46,350  -->  00:04:50,680
We're going to pass in just an object here that says fetch posts.

64

00:04:50,760  -->  00:04:54,460
So what this does is it's just a shortcut it's a little bit little helper.

65

00:04:54,720  -->  00:05:00,420
It's still going to give us access to this doc prob start fecche posts inside of our component but without

66

00:05:00,420  -->  00:05:04,560
the added boilerplate of no map dispatch to profs.

67

00:05:05,250  -->  00:05:09,280
Let's go ahead and refresh just to make sure it still works.

68

00:05:09,400  -->  00:05:14,130
And yep it looks like it does we're still correctly calling the dispatch.

69

00:05:14,640  -->  00:05:15,580
So this is great.

70

00:05:15,750  -->  00:05:18,670
Nice little short cut that saves us some code.

71

00:05:18,690  -->  00:05:26,460
There is one little refactor here we can use a little bit of E6 because we've got the same key as the

72

00:05:26,460  -->  00:05:27,500
value here.

73

00:05:27,630  -->  00:05:31,670
We can actually condense this down to just looking like so.

74

00:05:31,970  -->  00:05:36,530
So we've got fetched PPOs surrounded by curly braces.

75

00:05:36,600  -->  00:05:38,630
Remember this is E-6 syntax.

76

00:05:38,820  -->  00:05:43,220
It's completely identical to writing fetch posts Colan fetch posts.

77

00:05:43,260  -->  00:05:48,040
It's just a little bit of a shorthand with ESX.

78

00:05:48,690  -->  00:05:50,610
OK so let's review here real quick.

79

00:05:50,610  -->  00:05:58,140
Our strategy for fetching data is to dispatch an action whenever the post index component is about to

80

00:05:58,140  -->  00:06:03,870
be rendered to the DOM pretty straightforward in our application right here.

81

00:06:03,870  -->  00:06:05,670
This is a pretty easy decision.

82

00:06:05,670  -->  00:06:10,410
We know exactly when we want to load our data whenever Post's index is about to be mounted to the DOM

83

00:06:10,410  -->  00:06:11,040
.

84

00:06:11,160  -->  00:06:17,310
You'll come to find on your own apps in the future that no good start to get a little bit more complicated

85

00:06:17,310  -->  00:06:19,060
a little bit more complex.

86

00:06:19,110  -->  00:06:24,660
Knowing when to fetch your data starts to get a little bit more confusing it's not always quite so black

87

00:06:24,660  -->  00:06:27,130
and white as it is in this application.

88

00:06:27,150  -->  00:06:32,760
So in your own application Duby you do put some careful thought into where you want to make your action

89

00:06:32,760  -->  00:06:34,050
create or call.

90

00:06:34,050  -->  00:06:37,700
You know where you want to start your data fetching process from.

91

00:06:38,310  -->  00:06:40,460
Ok one last Sillery factor here.

92

00:06:40,530  -->  00:06:41,670
We don't need our bind.

93

00:06:41,670  -->  00:06:46,560
Action creators call it the top song and go ahead and delete that line.

94

00:06:46,560  -->  00:06:47,760
Cool looks good.

95

00:06:48,030  -->  00:06:50,640
Let's go ahead and continue in the next section