1
00:00:00,510 --> 00:00:06,300
In the last video refactor the app component into a class based component so that we can easily call

2
00:00:06,300 --> 00:00:12,210
an action creator from one time to attempt to fetch our current user the instant our application starts

3
00:00:12,210 --> 00:00:13,280
to load.

4
00:00:13,290 --> 00:00:18,690
We're now going to hook up our app component to our redux store by using the Kinect helper from the

5
00:00:18,690 --> 00:00:20,520
re-act redux library.

6
00:00:20,520 --> 00:00:25,600
By doing so we'll be making sure that the app component can actually call an action creator.

7
00:00:25,620 --> 00:00:32,130
So step one is going to be to import the connect helper from the re-act redux library after we've imported

8
00:00:32,130 --> 00:00:37,330
that will then import all the different action creators from our actions file.

9
00:00:37,650 --> 00:00:43,440
So we'll first import connect from re-act redux.

10
00:00:43,800 --> 00:00:51,390
Then we will import start as actions from dot dot slash the actions file.

11
00:00:52,040 --> 00:00:52,330
OK.

12
00:00:52,350 --> 00:00:53,780
So just a quick review here.

13
00:00:53,970 --> 00:01:00,120
Remember the re-act redux library is all about compatibility between the react and the redux libraries

14
00:01:00,750 --> 00:01:05,160
redux was built assuming that you were not going to use it with react at all.

15
00:01:05,400 --> 00:01:10,310
So to get redux to work nicely with react we make use of the re-act redux Leibert.

16
00:01:10,680 --> 00:01:16,410
In particular we make use of the connect function to give certain components the ability to call action

17
00:01:16,410 --> 00:01:17,370
creators.

18
00:01:17,370 --> 00:01:19,820
So that's why we imported connecter at year.

19
00:01:19,860 --> 00:01:26,070
Secondly we imported all the different action creators from our actions index stopped G-S file.

20
00:01:26,070 --> 00:01:31,050
Right now we only have a single action Creator in there but very shortly we will have many different

21
00:01:31,050 --> 00:01:31,640
ones.

22
00:01:31,920 --> 00:01:36,570
So we're going to just pull out all the different action creators we've defined in there by writing

23
00:01:36,660 --> 00:01:43,050
star as actions which essentially means take all the different action creators we've defined and just

24
00:01:43,050 --> 00:01:45,450
assign them to the object actions.

25
00:01:45,480 --> 00:01:52,990
Reiger So now we'll make use of the connect helper and the actions object to wire them all up to the

26
00:01:53,080 --> 00:01:56,190
app to the app component tongue twister.

27
00:01:56,520 --> 00:01:56,810
OK.

28
00:01:56,830 --> 00:01:58,730
So let's do it at the very bottom.

29
00:01:58,750 --> 00:02:00,930
So here is our expert default statement.

30
00:02:01,030 --> 00:02:03,430
And remember what the connect function looks like.

31
00:02:03,550 --> 00:02:10,930
We say connect we place one set of parentheses and then we place the second set around the app object.

32
00:02:11,110 --> 00:02:15,880
The first argument is reserved for the map state to prop's arguments or the map state to proper function

33
00:02:15,970 --> 00:02:22,390
which we're not going to use on this component so we're just going to say no for that first argument

34
00:02:22,980 --> 00:02:27,060
and then for the second argument we pass in all the different action creators we want to wire up.

35
00:02:27,310 --> 00:02:30,050
So we'll pass in actions like so.

36
00:02:30,700 --> 00:02:31,100
OK.

37
00:02:31,180 --> 00:02:35,440
One last step and then we will be able to pass actually tests inside the browser.

38
00:02:35,440 --> 00:02:40,600
Remember that once we pass in all of these different actions they are assigned to the app component

39
00:02:40,750 --> 00:02:42,070
as props.

40
00:02:42,070 --> 00:02:49,770
So now inside of the app component we can call our action Creator by referencing this props.

41
00:02:49,900 --> 00:02:55,810
And then the name of the action creator which in this case we are named as fecche user right here.

42
00:02:56,410 --> 00:03:00,220
So this stop prop's dot that user like so.

43
00:03:00,880 --> 00:03:01,440
OK.

44
00:03:01,900 --> 00:03:03,450
So this is looking pretty good.

45
00:03:03,490 --> 00:03:09,370
Now the last thing we have to do is make sure that we've got like some way to verify and test and make

46
00:03:09,370 --> 00:03:16,480
sure that the data that says whether or not our user is actually logged in gets communicated to producer.

47
00:03:16,780 --> 00:03:21,100
So I'm going to open up our inducers author douceur file.

48
00:03:21,100 --> 00:03:25,930
So here's the author douceur which is eventually going to be responsible for determining whether or

49
00:03:25,930 --> 00:03:28,270
not the user is actually logged in.

50
00:03:28,450 --> 00:03:34,330
And we're just going to add a consulate statement in here to log every single action that this producer

51
00:03:34,330 --> 00:03:35,700
gets called with.

52
00:03:35,710 --> 00:03:38,530
So now in theory let's walk through the entire flow.

53
00:03:38,530 --> 00:03:43,600
Just very briefly because I know we've kind of talked in theory enough here when the reactor application

54
00:03:43,600 --> 00:03:48,370
boots up the AF component will automatically call the actual creator.

55
00:03:48,370 --> 00:03:55,330
The Creator will make the Ajax request once the request is resolved we get access to the dispatch function

56
00:03:55,420 --> 00:04:02,410
and we will automatically honor our own very manually I would say dispatch in action that action will

57
00:04:02,410 --> 00:04:07,270
be then sent off to all of our different reducers of which there's only one right now.

58
00:04:07,270 --> 00:04:12,130
So just the author douceur and we've got our consul log in there to verify that the actions is coming

59
00:04:12,130 --> 00:04:13,270
across.

60
00:04:13,270 --> 00:04:18,930
So at this point we are really testing many different pieces of this flow many different moving pieces.

61
00:04:18,970 --> 00:04:24,370
So I want to tell you right now that if you get any air or if we don't see the console or anything like

62
00:04:24,370 --> 00:04:26,860
that it is totally fine.

63
00:04:27,160 --> 00:04:31,180
All we got to do is a little bit of trouble shooting because there's a lot of different steps in here

64
00:04:31,180 --> 00:04:33,700
where something could have gone poorly.

65
00:04:33,700 --> 00:04:35,760
So let's test this out and see how to do it.

66
00:04:36,210 --> 00:04:41,130
I will flip back over to the re-act application now my server is not currently running so I'm going

67
00:04:41,130 --> 00:04:45,040
to make sure I started back up by going back over to my terminal.

68
00:04:45,140 --> 00:04:49,940
I'm going to change to the server directory and I'll start everything up with any end run death.

69
00:04:51,190 --> 00:04:52,830
So I'll just let that do its thing here.

70
00:04:52,830 --> 00:05:00,400
Very briefly it should be faster than previous Because I actually just restarted a lot actually just

71
00:05:00,400 --> 00:05:03,950
restarted my laptop and usually runs much faster after that.

72
00:05:04,060 --> 00:05:10,050
So let's watch the developments server start up.

73
00:05:10,410 --> 00:05:11,520
Awkward pause.

74
00:05:11,640 --> 00:05:12,010
I know.

75
00:05:12,030 --> 00:05:12,470
I know.

76
00:05:12,510 --> 00:05:13,640
Awkward pause.

77
00:05:13,880 --> 00:05:18,780
OK so it looks like we've got a little bit of a warning here it says fetch user is assigned a value

78
00:05:18,780 --> 00:05:20,340
but never used again.

79
00:05:20,340 --> 00:05:24,750
Recall that fetch you are this right here is just saying hey you actually like created this variable

80
00:05:24,750 --> 00:05:26,030
but didn't use it.

81
00:05:26,070 --> 00:05:27,630
This is completely fine right now.

82
00:05:27,630 --> 00:05:28,590
Totally fine.

83
00:05:28,620 --> 00:05:32,760
We will just go over to our actions indexed index j s file.

84
00:05:32,760 --> 00:05:37,450
You'll notice that I assigned Fettes user to the variable fetch user.

85
00:05:37,740 --> 00:05:41,590
You know I assign actual action Crear by never actually export it from this file.

86
00:05:41,610 --> 00:05:47,370
So let's make sure that we actually export it by saying export Konst fetch user.

87
00:05:47,370 --> 00:05:50,270
So we just forgot the expert you are there.

88
00:05:50,270 --> 00:05:55,410
So now if we save this we should be able to go back over and not see any error messages or anything

89
00:05:55,410 --> 00:05:56,460
like that.

90
00:05:56,490 --> 00:05:57,920
I think they were good to go.

91
00:05:58,350 --> 00:05:58,700
OK.

92
00:05:58,740 --> 00:06:03,120
So now back inside the browser I'm going to refresh the page.

93
00:06:03,120 --> 00:06:04,650
So we really go from scratch.

94
00:06:04,830 --> 00:06:11,090
Now we see for console logs here one console log from every action that comes into that reducer.

95
00:06:11,130 --> 00:06:12,660
The author douceur.

96
00:06:12,750 --> 00:06:17,730
Now the first three are a part of the redux boot up process so we don't really care about these.

97
00:06:17,760 --> 00:06:22,890
We really care about the fourth one which is going to tell us whether or not the user is signed in so

98
00:06:22,890 --> 00:06:23,920
we can look at the action.

99
00:06:23,940 --> 00:06:25,760
You'll see that it has a type fetch user.

100
00:06:25,980 --> 00:06:29,380
So it definitely appears that redux thung worked correctly.

101
00:06:29,400 --> 00:06:31,930
We definitely made the request to our back and server.

102
00:06:32,160 --> 00:06:37,590
And then after the request was completed we dispatched an action which was sent directly to all of our

103
00:06:37,590 --> 00:06:39,240
different reducers.

104
00:06:39,240 --> 00:06:44,550
Now if we expand this thing and look at the payload object you'll notice a couple of different properties

105
00:06:44,550 --> 00:06:45,320
in here.

106
00:06:45,330 --> 00:06:48,700
So this is the Axel's response object.

107
00:06:48,960 --> 00:06:54,910
That thing has a property data which communicates back the actual song that the server sent to us.

108
00:06:54,930 --> 00:07:00,430
So if we expand data right here I will see right away my actual user model.

109
00:07:00,600 --> 00:07:04,850
So here's my Google I.D. Here's my user ID and that's pretty much it.

110
00:07:04,860 --> 00:07:09,570
We are definitely now able to ask our server whether or not the users logged in.

111
00:07:09,570 --> 00:07:13,820
Now before we pause a video if you don't see any data here just don't pause the video.

112
00:07:13,830 --> 00:07:15,000
I want to be really clear.

113
00:07:15,000 --> 00:07:21,630
If you do not see any data right here like if it's just an empty string that is totally ok it very likely

114
00:07:21,630 --> 00:07:25,820
means that you are just not logged in to the Express side of the application.

115
00:07:25,830 --> 00:07:31,650
Remember you can only always manually test to see if you are logged into the application by going to

116
00:07:31,650 --> 00:07:36,330
localhost Colan 5 0 0 0 0 and flash API slash current user.

117
00:07:36,390 --> 00:07:39,930
And when I do so I should see my current user appear on screen.

118
00:07:39,960 --> 00:07:46,890
So if you do not see your current user right here and I can show you exactly what you probably see I'll

119
00:07:46,900 --> 00:07:51,230
go to API slash log out which remember logs US-Saudi application.

120
00:07:51,300 --> 00:07:58,230
So I'm now considered to be logged out and now if I refresh you will see a payload with a data of empty

121
00:07:58,230 --> 00:08:02,250
string like so which means no we are not signed in.

122
00:08:02,280 --> 00:08:04,730
So if you see that that means you're not logged out.

123
00:08:04,800 --> 00:08:11,310
And remember you can always log back in by manually going to localhost five thousand off slash Google.

124
00:08:11,550 --> 00:08:15,160
So I'm now logged back in even though I see this message right here.

125
00:08:15,260 --> 00:08:21,890
And if I refreshed the app again I now have a payload with the data property of my user model.

126
00:08:22,380 --> 00:08:22,790
Cool.

127
00:08:22,800 --> 00:08:25,400
So looks like everything is working out successfully.

128
00:08:25,470 --> 00:08:29,290
Now I want to tell you if you have any errors at this point totally fine.

129
00:08:29,310 --> 00:08:33,040
Hop over to the discussion post a screenshot let me know what's going wrong.

130
00:08:33,060 --> 00:08:34,430
Let me help you solve the issue.

131
00:08:34,500 --> 00:08:35,480
OK.

132
00:08:35,970 --> 00:08:38,270
Now I think that we've done pretty well at this point.

133
00:08:38,280 --> 00:08:41,630
The next thing that I want to do remember I want to.

134
00:08:42,170 --> 00:08:47,730
Well I want to take a break obviously but when we come back we're going to Reflektor our user action

135
00:08:47,730 --> 00:08:51,580
creator to make it look a little bit nicer than what it looks like right now.

136
00:08:51,870 --> 00:08:53,150
So let's take a quick break.

137
00:08:53,160 --> 00:08:58,320
When we come back we're going to factor this action creator and make sure that it looks a lot more legible

138
00:08:58,620 --> 00:09:00,090
than it looks at present.

139
00:09:00,120 --> 00:09:01,980
So I'll see you in just a second.