1
00:00:01,390 --> 00:00:06,620
Now that we've got our fecche posts action creator put together and our actions file We've also got

2
00:00:06,620 --> 00:00:10,590
our reducer hooked up to it for the Fettes fetch post action.

3
00:00:10,610 --> 00:00:15,110
So I think that the very last thing that we have to do here is wire up the fetch posts action creator

4
00:00:15,170 --> 00:00:17,340
to the post index component.

5
00:00:17,480 --> 00:00:23,450
So let's import our action creator will import the connect helper and get everything wired up at the

6
00:00:23,450 --> 00:00:24,320
top of the file.

7
00:00:24,350 --> 00:00:29,120
We'll start off by importing the connect over from re-act redux.

8
00:00:29,120 --> 00:00:38,060
Next we'll import our action creator which is fecche posts from up one directory actions and then we'll

9
00:00:38,060 --> 00:00:41,040
wire up the connect Helberg at the bottom.

10
00:00:41,090 --> 00:00:47,640
Now in the past we've made use of the Kinect helper by defining the map dispatched to prop's function.

11
00:00:47,680 --> 00:00:51,380
That's how we've been writing all of our code sofar throughout this course whenever we wanted to get

12
00:00:51,380 --> 00:00:56,740
an action creator directly into a component so we can call it off the proper subject.

13
00:00:56,840 --> 00:01:00,860
I want to show you another way in which we can wire up in-action creator in this way is a little bit

14
00:01:00,860 --> 00:01:02,410
more of a shortcut.

15
00:01:02,960 --> 00:01:07,730
So rather than defining a separate function for defining exactly how the action is going to be hooked

16
00:01:07,730 --> 00:01:13,650
up we're going to first define our map state to prop's argument of no because we are not passing map

17
00:01:13,650 --> 00:01:18,860
state to props and then as the second argument rather than passing in that extra function we're just

18
00:01:18,860 --> 00:01:23,820
going to pass in the actual creator itself inside of an object.

19
00:01:23,820 --> 00:01:31,790
So I'm going to say Fetch posts is fetch posts like so now you'll notice that the key and the value

20
00:01:31,820 --> 00:01:34,520
are identical value names or property names.

21
00:01:34,700 --> 00:01:37,390
So rather than saying Fetch pose colon fetch post.

22
00:01:37,400 --> 00:01:44,420
We can use a little bit of E-6 to condense this down to just fetch posts like so bring up an action

23
00:01:44,420 --> 00:01:51,110
Krater with this syntax instead of using that map dispatched to proper function is completely identical

24
00:01:51,110 --> 00:01:51,950
in nature.

25
00:01:51,950 --> 00:01:58,070
So we still have access to this Propst fetch posts inside of the component.

26
00:01:58,070 --> 00:02:03,680
The reason that I first introduced Matt dispatched to prop's in that separate function format was because

27
00:02:03,680 --> 00:02:08,360
there definitely are times where you want to use a separate function like for example if you want to

28
00:02:08,660 --> 00:02:14,020
do some computation on exactly how you want to call the action creator ahead of time.

29
00:02:14,030 --> 00:02:18,830
In addition it gives you a little bit more insight to what is going on behind the scenes Palissy in

30
00:02:18,830 --> 00:02:22,000
the action creator like this right here is just asking.

31
00:02:22,010 --> 00:02:22,570
Connect.

32
00:02:22,570 --> 00:02:24,450
To do that extra step for us.

33
00:02:24,470 --> 00:02:26,090
So that step is still occurring.

34
00:02:26,090 --> 00:02:29,030
Connect is just taking care of it for us.

35
00:02:29,030 --> 00:02:34,280
Moving forward we're probably going to generally be using this abbreviated syntax unless it looks like

36
00:02:34,280 --> 00:02:40,490
there is a good reason to bind the dispatch function ahead of time and it really just so happens that

37
00:02:40,490 --> 00:02:45,170
there might be inside this application and so we will get a good get some good experience of where we

38
00:02:45,170 --> 00:02:49,710
still might want to do that separate breakout function look at.

39
00:02:49,750 --> 00:02:54,790
So we've got our action creator hooked up to our component and now here's the real question.

40
00:02:54,850 --> 00:02:56,630
Here's the real question.

41
00:02:56,680 --> 00:03:00,460
When are we going to call the action Creator.

42
00:03:00,460 --> 00:03:05,330
When are we going to attempt to reach out to the API and fetch our list of posts.

43
00:03:05,440 --> 00:03:10,900
If you think back to all the previous applications we've worked on we've always fetched data after some

44
00:03:10,900 --> 00:03:12,880
particular event occurs.

45
00:03:12,950 --> 00:03:17,980
So maybe the user clicks on something or hovers on something or whatever it might be and we haven't

46
00:03:17,980 --> 00:03:23,860
really ever put together a component where we said Hey as soon as we know that this component is about

47
00:03:23,860 --> 00:03:27,480
to be rendered I want to go and attempt to fetch some data.

48
00:03:27,640 --> 00:03:30,330
And that's really what we want to have happen this time around.

49
00:03:30,400 --> 00:03:35,650
We really want to say the instant we know that the user is about to go to this component right here

50
00:03:36,010 --> 00:03:41,680
or the components about to be shown on the screen we want to reach out to our API and fetch this list

51
00:03:41,740 --> 00:03:44,760
of posts by calling the action creator.

52
00:03:45,220 --> 00:03:50,400
So to take care of this we're going to make use of a re-act life cycle method.

53
00:03:50,620 --> 00:03:58,750
A life cycle method is a function on a re-act component class that is automatically called by react.

54
00:03:58,750 --> 00:04:03,190
Now there are several different lifecycle methods available but the one that we're going to work with

55
00:04:03,280 --> 00:04:06,170
is called component did mount.

56
00:04:06,490 --> 00:04:11,230
So let's define this method and we'll talk about exactly how it works.

57
00:04:11,380 --> 00:04:15,600
So we're going define a separate function on here called component.

58
00:04:16,060 --> 00:04:24,700
Did mount this function will be automatically called by react immediately after this component has shown

59
00:04:24,700 --> 00:04:26,200
up inside the DOM.

60
00:04:26,470 --> 00:04:33,430
That makes it a perfect location to go and fetch some data or initiate some one time loading procedure

61
00:04:33,460 --> 00:04:36,590
if we might have anything that we want to do exactly one time.

62
00:04:36,820 --> 00:04:39,210
When this component shows up on the page.

63
00:04:39,360 --> 00:04:44,230
Now you might be thinking Well Stephen why would we want to go and fetch data after the component has

64
00:04:44,230 --> 00:04:45,550
shown up on the screen.

65
00:04:45,850 --> 00:04:52,270
Well in fact it doesn't really make a difference whether or not we call that action creator before or

66
00:04:52,300 --> 00:04:54,850
after the component renders on the screen.

67
00:04:54,850 --> 00:05:00,370
And the reason for that is that fetching our data is an asynchronous operation.

68
00:05:00,370 --> 00:05:05,830
Whenever we reach out to that blog post API to fetch some data it takes some amount of time to fetch

69
00:05:05,860 --> 00:05:12,700
that data and had it be returned to our browser and re-act does not have any concept of figuring out

70
00:05:12,700 --> 00:05:21,130
how to say not render the component until after we do some pre-loading operation re-act is always going

71
00:05:21,130 --> 00:05:26,800
to eagerly load itself or render the component I should say as soon as it can and it's never going to

72
00:05:26,800 --> 00:05:31,660
say oh it looks like they're still loading some data here I better hold up in some fashion I just wait.

73
00:05:31,660 --> 00:05:36,580
So even though there is another life cycle method that we could use called component will mount and

74
00:05:36,580 --> 00:05:39,340
that's called before the component shows up in the DOM.

75
00:05:39,370 --> 00:05:44,610
That's not necessarily a better place to call it because in either case it's always going to.

76
00:05:44,680 --> 00:05:49,330
We're always going to end up with a component being rendered one time before we actually successfully

77
00:05:49,330 --> 00:05:50,100
touch our data.

78
00:05:50,140 --> 00:05:57,410
Again just because it takes some amount of time to make that API request now back to the specifics of

79
00:05:57,410 --> 00:06:03,650
lifecycle methods again this is going to be called automatically by re-act specifically because I gave

80
00:06:03,650 --> 00:06:05,950
it the name component did mount.

81
00:06:05,990 --> 00:06:14,000
So if you make any typos in here like if you say capital C or Vee's say put into ns or something like

82
00:06:14,000 --> 00:06:14,200
that.

83
00:06:14,210 --> 00:06:19,070
If it's any other name whatsoever the lifecycle method will not be called.

84
00:06:19,070 --> 00:06:24,350
It has to specifically be called component did mount with the correct spelling for react to actually

85
00:06:24,350 --> 00:06:26,380
call this thing automatically.

86
00:06:26,870 --> 00:06:32,360
OK so again because this function is called automatically one time when the components first rendered

87
00:06:32,660 --> 00:06:37,360
that makes it an ideal location to kick off our data loading process.

88
00:06:37,400 --> 00:06:46,400
So inside the lifecycle method we'll call this Propst dot fetch posts and that should kick off our data

89
00:06:46,400 --> 00:06:48,230
loading process.

90
00:06:48,230 --> 00:06:52,460
So at this point I think that we could do a little test inside the browser to make sure that everything's

91
00:06:52,460 --> 00:06:53,940
working the way we expect.

92
00:06:54,140 --> 00:06:58,460
If we refreshed the page right now we're not going to see any content appear on the screen because we're

93
00:06:58,460 --> 00:07:03,590
still not getting a list of posts directly into its component and mapping over them and showing the

94
00:07:03,590 --> 00:07:04,560
list of posts.

95
00:07:04,730 --> 00:07:07,990
But we should at least be able to see a network request be issued.

96
00:07:08,270 --> 00:07:09,840
So let's change over to our browser.

97
00:07:09,980 --> 00:07:12,860
Open up the network tab and see how we're doing here.

98
00:07:14,260 --> 00:07:14,450
OK.

99
00:07:14,530 --> 00:07:16,010
So go back to my browser.

100
00:07:16,380 --> 00:07:22,330
I want to open up the network tab and I'm going to make sure I filter by ex-aide requests.

101
00:07:22,330 --> 00:07:26,090
So those are Ajax requests that are being issued to the API.

102
00:07:26,230 --> 00:07:34,700
Now refresh the page and when everything is back up I can see that it looks like there was one request

103
00:07:34,700 --> 00:07:35,650
made right here.

104
00:07:35,870 --> 00:07:41,480
And as I clicked through a preview tab I see just an empty tray with no properties whatsoever which

105
00:07:41,480 --> 00:07:41,890
is good.

106
00:07:41,900 --> 00:07:46,640
That's what I would expect right now because we do not yet have any posts saved to this particular API

107
00:07:46,640 --> 00:07:47,310
key.

108
00:07:47,720 --> 00:07:52,200
So it looks like our initial data loading process is coming along pretty well.

109
00:07:52,250 --> 00:07:57,920
Let's wrap up our post index component in the next section by making sure that we can render a list

110
00:07:57,920 --> 00:07:59,220
of posts inside of here.

111
00:07:59,390 --> 00:08:04,280
And we'll also put together a little bit of test dummy data on our API to get Arliss supposed to show

112
00:08:04,280 --> 00:08:04,720
up.

113
00:08:04,730 --> 00:08:06,020
So I'll see in just a second.