1
00:00:00,660 --> 00:00:05,010
In the last section we put together our first action creator that makes use of redux thunk.

2
00:00:05,070 --> 00:00:10,470
I now want to add this action creator to one of our components inside of our application and make sure

3
00:00:10,470 --> 00:00:15,780
that the instant our application starts to boot up we actually fetch the user and then do something

4
00:00:15,780 --> 00:00:16,730
with them.

5
00:00:16,740 --> 00:00:20,210
So if you recall we had previously been looking at this diagram right here.

6
00:00:20,250 --> 00:00:25,420
We had said that we wanted to attempt to fetch this user we wanted to call this action creator.

7
00:00:25,500 --> 00:00:31,020
Really the instant our re-act application boots up and so the immediate question the immediate thing

8
00:00:31,020 --> 00:00:36,090
that we really want to be thinking about is well where should we really add this action creator to.

9
00:00:36,450 --> 00:00:41,880
Well I'm going to suggest that the best place to add this call to this action creator is going to be

10
00:00:41,880 --> 00:00:44,150
our app component.

11
00:00:44,220 --> 00:00:49,370
So here's our out component which right now really just contains our different routing logic.

12
00:00:49,380 --> 00:00:54,450
Now you might say to me Stephen should we add this action creator to the header like the header is what

13
00:00:54,450 --> 00:00:56,550
actually cares about whether or not the user is logged in.

14
00:00:56,550 --> 00:00:58,670
Isn't that where we should call the action Kreator.

15
00:00:58,980 --> 00:01:00,840
Well you know what you're definitely right.

16
00:01:00,840 --> 00:01:06,900
Right now only the header can cares about whether or not the users logged in but very shortly we're

17
00:01:06,900 --> 00:01:12,060
going to have other locations inside of our application that also care about whether or not the user

18
00:01:12,060 --> 00:01:12,770
signed in.

19
00:01:13,020 --> 00:01:18,290
So this is not the only location right now that cares about if the user is signed in or not.

20
00:01:18,360 --> 00:01:21,520
Or at least the headers not other locations will as well.

21
00:01:21,560 --> 00:01:27,300
And so we are going to centralize that logic inside of our app component.

22
00:01:27,300 --> 00:01:32,990
Now the next thing we need to be aware of is that right now our app component is a functional component.

23
00:01:33,270 --> 00:01:39,210
We really only want to attempt to fetch the current user the very first time our app component is rendered

24
00:01:39,210 --> 00:01:40,210
to the screen.

25
00:01:40,350 --> 00:01:46,020
So I'm going to suggest that maybe we should refactor the app component and rather than making it a

26
00:01:46,020 --> 00:01:49,020
functional component it should be class based instead.

27
00:01:49,120 --> 00:01:54,840
And that way we can get access to a nice nice life cycle method which will be automatically called when

28
00:01:54,840 --> 00:01:57,050
this component is actually rendered to the screen.

29
00:01:57,390 --> 00:02:02,270
So I think that step number one right here is serif actor app to a class based component.

30
00:02:02,460 --> 00:02:07,060
And then once it is refactored we will then use it to call our action creator.

31
00:02:07,080 --> 00:02:08,420
So let's get to it.

32
00:02:08,460 --> 00:02:14,760
The first thing we'll do is modify our import statement for react at the top and make sure we also pull

33
00:02:14,760 --> 00:02:17,890
in the component base class as well.

34
00:02:17,910 --> 00:02:22,670
We will then refactor our functional component over to a class based one.

35
00:02:22,740 --> 00:02:24,550
So we're going to do this step by step.

36
00:02:24,690 --> 00:02:31,860
First we're going to find the cost app declaration at the top and replace it with class app extends

37
00:02:32,140 --> 00:02:34,570
component.

38
00:02:34,770 --> 00:02:37,340
Now here's the same return block that we had before.

39
00:02:37,350 --> 00:02:41,550
You'll notice that we still have the closing curly brace at the very bottom from the arrow function

40
00:02:41,550 --> 00:02:42,990
that we just replaced.

41
00:02:43,050 --> 00:02:49,650
So all we really have to do now is make sure that we wrap this return statement inside of a render function.

42
00:02:50,040 --> 00:02:54,810
So as a new line I'm going to add the render method.

43
00:02:55,210 --> 00:03:01,710
I'm going to make sure I close off this render method curly brace right after the return statement like

44
00:03:01,710 --> 00:03:05,830
so and then I'm going to indent the entire return statement.

45
00:03:06,440 --> 00:03:08,300
OK so there's the refactor.

46
00:03:08,310 --> 00:03:11,400
So now we've got Rander return.

47
00:03:11,460 --> 00:03:13,500
Here's the closing parentheses for render.

48
00:03:13,500 --> 00:03:18,870
And then the closing curly brace for the render method and then the closing curly brace for the overall

49
00:03:18,960 --> 00:03:20,750
class.

50
00:03:20,760 --> 00:03:23,640
Now we've got our class based component.

51
00:03:23,850 --> 00:03:28,670
We will add on our lifecycle method that we will use to fetch the current user.

52
00:03:28,670 --> 00:03:32,010
So I'm going to say component did mount.

53
00:03:32,100 --> 00:03:37,830
So in other words the instant this component has been mounted or rendered onto the screen go in attempt

54
00:03:37,830 --> 00:03:42,790
to fetch the current user or figure out whether or not our current user is actually signed in.

55
00:03:42,840 --> 00:03:47,370
Now you might look at a component in Mount right here and say You know Steven do we actually want to

56
00:03:47,370 --> 00:03:51,740
figure out who the current user is before we render this component to this screen.

57
00:03:51,840 --> 00:03:57,250
You know shouldn't we use the lifecycle method component real mount instead.

58
00:03:57,510 --> 00:03:59,370
And the answer is that well you know what.

59
00:03:59,400 --> 00:04:01,790
Two reasons that we're going to use did mount instead.

60
00:04:01,890 --> 00:04:08,250
Number one in future versions of re-act the component will mount method might be getting called multiple

61
00:04:08,250 --> 00:04:09,880
times automatically.

62
00:04:10,140 --> 00:04:15,660
And so by convention component in MT is now looked upon as being the preferred location to make any

63
00:04:15,660 --> 00:04:19,560
type of Inish initial Ajax request or anything like that.

64
00:04:19,560 --> 00:04:26,400
In addition the difference in time between component will mount and component did mount is essentially

65
00:04:26,400 --> 00:04:28,170
nil essentially zero.

66
00:04:28,410 --> 00:04:32,190
So there's not really a big difference from the speed of the request.

67
00:04:32,190 --> 00:04:34,920
If we call it from component will mount or did mount.

68
00:04:34,980 --> 00:04:36,500
Not a big difference there.

69
00:04:37,120 --> 00:04:37,640
OK.

70
00:04:37,950 --> 00:04:43,920
So we've now got a great location to color action creator from our next step is going to be to wire

71
00:04:44,070 --> 00:04:50,640
this class or this app component up to receive action creators from the redux side of our application.

72
00:04:50,670 --> 00:04:56,040
So if you recall that is where we're going to bring in the use the connect helper from the re-act redux

73
00:04:56,100 --> 00:04:56,730
library.

74
00:04:56,730 --> 00:05:01,950
So again going a little bit into the details of reactor redux.

75
00:05:02,070 --> 00:05:03,870
So that's going to be its own little challenge.

76
00:05:03,870 --> 00:05:06,450
So I think that we'll take a quick break right now.

77
00:05:06,450 --> 00:05:11,880
We'll come back in the next video and we'll wire up our app component and make sure that it is able

78
00:05:11,880 --> 00:05:15,060
to call action creators inside of our application.

79
00:05:15,060 --> 00:05:17,240
So I'll see you in just a second.