1

00:00:01,540  -->  00:00:07,530
Our logic for fetching blog posts is complete but we're missing one crucial piece here we need to actually

2

00:00:07,530  -->  00:00:10,610
call the action creator or to fetch the list of data.

3

00:00:10,630  -->  00:00:14,910
There's nowhere in our app right now that's actually going invoke that action creator and start the

4

00:00:14,910  -->  00:00:16,710
data fetching process.

5

00:00:16,920  -->  00:00:23,820
In this section we're going to learn how to fetch our data and figuring out how and when to fetch data

6

00:00:23,910  -->  00:00:27,480
in a read X app is actually kind of deceptively complicated.

7

00:00:27,720  -->  00:00:33,030
So to tackle this topic we're going to go ahead and talk about what we did in the past for fetching

8

00:00:33,030  -->  00:00:38,100
data in our weather application and then talk about a couple of different approaches that we could take

9

00:00:38,100  -->  00:00:39,950
this time around.

10

00:00:39,960  -->  00:00:45,000
So first I'm going to pull up a diagram of how we fetch started data in the weather app

11

00:00:48,480  -->  00:00:49,810
in the weather application.

12

00:00:49,830  -->  00:00:55,410
A user would type in some input here at the top so they'd type in say like San Francisco as the city

13

00:00:55,680  -->  00:00:58,440
and then they would click the Search button.

14

00:00:59,310  -->  00:01:07,650
In response we called an action creator which return in action and that action went through our middleware

15

00:01:07,880  -->  00:01:09,410
or reducers et cetera.

16

00:01:09,630  -->  00:01:14,120
And then our data flowed back into the app right here.

17

00:01:14,340  -->  00:01:20,310
So the point is whenever a user clicks the button we had a very distinct event you know a very distinct

18

00:01:20,310  -->  00:01:22,690
time in our application where we knew that.

19

00:01:22,710  -->  00:01:23,260
OK.

20

00:01:23,370  -->  00:01:28,120
Right now at this instant This is when we need to call our action creator.

21

00:01:29,520  -->  00:01:36,390
Let's juxtapose that with a separate diagram of our blog posts application that we're about to make

22

00:01:36,390  -->  00:01:37,110
here.

23

00:01:37,170  -->  00:01:42,420
So this time around we don't really have the benefit of a simple click event to know when to call the

24

00:01:42,420  -->  00:01:48,450
action Krait creator the place to call the action creator is really a lot more ambiguous.

25

00:01:48,450  -->  00:01:55,110
All we know is that when we're navigating to the Post's index component that's probably a good time

26

00:01:55,110  -->  00:01:56,380
to fetch our data.

27

00:01:56,400  -->  00:01:58,310
You know we need to show some data on the page.

28

00:01:58,350  -->  00:02:00,480
That's the time that we need to call that.

29

00:02:00,950  -->  00:02:05,610
And once we call that action creator then we're going to go ahead and you know same process again.

30

00:02:05,760  -->  00:02:10,890
Action flows to the middle where the reducers blah blah blah and new data flows into our state.

31

00:02:11,160  -->  00:02:17,190
But the real question here is we need to fetch data whenever that your Ehle changes.

32

00:02:18,090  -->  00:02:24,780
So to handle this we're going to make use of what's called a re-act lifecycle method a lifecycle method

33

00:02:24,810  -->  00:02:30,650
is a function on a reata component class that is automatically called by react.

34

00:02:30,660  -->  00:02:36,000
There are several different lifecycle methods but the one that we're going to work with is called component

35

00:02:36,030  -->  00:02:41,990
will mount let's put together the implementation for this and then we'll go ahead and talk about you

36

00:02:41,990  -->  00:02:45,650
know what it is what it's doing for us.

37

00:02:45,660  -->  00:02:51,880
So back in our project I would open up our posts index file.

38

00:02:52,590  -->  00:02:55,390
So right now this is just a functional component.

39

00:02:55,590  -->  00:03:00,460
Let's go ahead and first refactor it to be a component class.

40

00:03:00,540  -->  00:03:07,380
So at the top we'll pull off our component like so and then we'll replace this.

41

00:03:07,470  -->  00:03:14,280
Let's just go ahead and delete all of it just so we can start from scratch and we'll do.

42

00:03:14,280  -->  00:03:27,840
Class PPOs index extends components put in our render method and return div

43

00:03:30,870  -->  00:03:40,520
list of blog posts and then at the bottom export default posts index.

44

00:03:41,430  -->  00:03:41,740
OK.

45

00:03:41,750  -->  00:03:47,530
So just to refactor from a functional component to a class based component.

46

00:03:47,640  -->  00:03:52,710
Now the next thing we're going to do is we're going to define a lifecycle method on here called component

47

00:03:52,740  -->  00:03:53,310
will mount.

48

00:03:53,310  -->  00:03:56,880
This is the one that we're just we were just talking about about this.

49

00:03:57,030  -->  00:04:00,790
So we'll define this method on the post index class.

50

00:04:01,590  -->  00:04:05,290
So we'll say components will mount.

51

00:04:06,330  -->  00:04:09,990
And right now we'll say console log.

52

00:04:10,190  -->  00:04:15,600
This would be a good time to call an action creator

53

00:04:19,590  -->  00:04:23,230
and we'll just say to fetch those like so.

54

00:04:23,780  -->  00:04:31,650
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

00:04:31,650  -->  00:04:35,290
big and then refresh.

56

00:04:35,580  -->  00:04:39,240
And so we see this would be a good time to call an action critter to fetch posts.

57

00:04:39,240  -->  00:04:39,730
OK.

58

00:04:39,960  -->  00:04:41,840
So you see the lot of pop up.

59

00:04:41,850  -->  00:04:47,560
What happens here again component will mount is a lifecycle method.

60

00:04:47,790  -->  00:04:55,380
If we define a method specifically called component will mount re-act will call this automatically whenever

61

00:04:55,380  -->  00:05:00,270
our component is about to be rendered to the DOM for the first time.

62

00:05:00,540  -->  00:05:05,540
It will not be called on subsequent re renderers though so because it's only called once.

63

00:05:05,610  -->  00:05:10,490
This would be a great place to place our action Kreator to go and fetch our data.

64

00:05:10,500  -->  00:05:16,560
So again the point here is that in our previous application there was a very easy location to decide

65

00:05:16,560  -->  00:05:18,010
where to fetch our data.

66

00:05:18,090  -->  00:05:20,220
This time around it's a little bit more ambiguous.

67

00:05:20,220  -->  00:05:26,460
You know we don't really know where the best place to put our data fetching process where to kick that

68

00:05:26,790  -->  00:05:28,170
that off from.

69

00:05:28,170  -->  00:05:33,510
And so for this application we're going to say whenever our Post's index component is about to mount

70

00:05:33,930  -->  00:05:36,060
please go and fetch our data for us.

71

00:05:36,270  -->  00:05:36,830
OK.

72

00:05:36,960  -->  00:05:42,070
Let's go ahead and in the next section we'll replace the consulate here with our action creator.

73

00:05:42,090  -->  00:05:43,080
I'll see it there.