1
00:00:00,460 --> 00:00:05,400
In the last section we establish that we're going to be line figuring out whether or not the current

2
00:00:05,400 --> 00:00:06,990
user is logged in.

3
00:00:06,990 --> 00:00:12,030
We then spoke a little bit about how our server already has an API route put together for telling us

4
00:00:12,030 --> 00:00:14,370
whether or not the user is logged in.

5
00:00:14,370 --> 00:00:20,160
So essentially we need to make an Ajax request to our backend and that will tell our re-act application

6
00:00:20,430 --> 00:00:22,260
whether or not we are authenticated.

7
00:00:22,470 --> 00:00:27,270
Now going into this process I'm doing a lot of build up here because we are going to very quickly touch

8
00:00:27,270 --> 00:00:32,400
on several different libraries and we're going to touch on a lot of different topics within our re-act

9
00:00:32,400 --> 00:00:33,400
application.

10
00:00:33,420 --> 00:00:37,710
And so this is something that really does deserve a little bit of buildup because once we start going

11
00:00:37,710 --> 00:00:44,670
through it we're going to be really covering like 4 or 5 different important concepts at the same time.

12
00:00:44,670 --> 00:00:49,590
So with that in mind let's take a look at a diagram that very clearly describes exactly how we're going

13
00:00:49,590 --> 00:00:51,190
to pull this off.

14
00:00:51,210 --> 00:00:57,840
So when our re-act application boots up we are going to make sure that our app component which is our

15
00:00:57,870 --> 00:01:04,350
essentially root component calls an action creator and this action creator is going to be responsible

16
00:01:04,380 --> 00:01:10,530
for figuring out who I should say making an API request to our backend and asking whether or not the

17
00:01:10,530 --> 00:01:12,530
current user is logged in.

18
00:01:13,200 --> 00:01:18,390
So we're going to imagine that this action creator has a function called fetch user or something like

19
00:01:18,390 --> 00:01:21,070
that inside of that action creator.

20
00:01:21,090 --> 00:01:26,120
We are going to use the actual library to make an Ajax request to our back end API.

21
00:01:26,310 --> 00:01:32,610
So specifically to the route API slash current user so that request is going to go out to the Express

22
00:01:32,610 --> 00:01:38,370
API and then we're going to get a response back presumably containing the user if the user is logged

23
00:01:38,370 --> 00:01:39,570
in.

24
00:01:39,630 --> 00:01:46,470
Once we get the request back we are then going to use a library called redux thunk to dispatch an action

25
00:01:46,740 --> 00:01:49,830
off to all the different reducers inside of our application.

26
00:01:50,150 --> 00:01:56,340
And so once we dispatched this action the action which contains the information of whether or not the

27
00:01:56,340 --> 00:02:02,010
user is logged in is then going to be sent to our author douceur our author reducers will be responsible

28
00:02:02,010 --> 00:02:07,620
for looking at that action and then updating some internal flag inside of it to say yes the user is

29
00:02:07,620 --> 00:02:10,370
logged in or no they are not.

30
00:02:10,380 --> 00:02:16,620
Once we have that new updated piece of states were then going to update the content inside of our head

31
00:02:16,620 --> 00:02:21,210
or by setting up the header to communicate directly with our redux store.

32
00:02:21,210 --> 00:02:26,520
So again this is a pretty complicated pretty involved process.

33
00:02:26,520 --> 00:02:30,840
The good news is that we are going to repeat it several times throughout this course essentially for

34
00:02:30,870 --> 00:02:32,990
every API request we put together.

35
00:02:33,010 --> 00:02:35,220
We're going to go through this exact same process.

36
00:02:35,280 --> 00:02:37,810
So we definitely will get a lot of practice with it.

37
00:02:37,890 --> 00:02:39,050
OK.

38
00:02:39,270 --> 00:02:40,080
So let's get started.

39
00:02:40,080 --> 00:02:42,750
Really no reason to dawdle any more.

40
00:02:42,810 --> 00:02:49,790
The first thing we're going to do is install the Axel's library and the redux thunked library ASIO's

41
00:02:49,800 --> 00:02:55,920
is responsible for helping us make API requests or Ajax requests to our back end API and redux thung

42
00:02:56,190 --> 00:03:02,370
is something that we use to helpfully maintain or kind of make asynchronous action creators behave the

43
00:03:02,370 --> 00:03:03,730
way we expect.

44
00:03:03,750 --> 00:03:08,880
So let's install these and then we'll start wiring all this stuff up over my terminal.

45
00:03:09,120 --> 00:03:10,980
I will change on over to the server.

46
00:03:11,280 --> 00:03:15,530
I'm going to kill the server and then change into the client directory.

47
00:03:15,570 --> 00:03:18,760
Because these are both client modules that we want to install.

48
00:03:19,110 --> 00:03:30,810
We will NPM install dash dash save axioms and then also redux oops redux dash phunk like some.

49
00:03:30,990 --> 00:03:35,780
OK so while that installs we're going to flip back over to our application and we will first start off

50
00:03:35,780 --> 00:03:37,980
by wiring up redux Thuc.

51
00:03:38,240 --> 00:03:43,730
Now we're not going to say right away exactly what redux thunked is all about but we will very shortly

52
00:03:43,730 --> 00:03:47,200
once we start working on the action creedo We will talk about exactly what it's doing.

53
00:03:47,260 --> 00:03:48,000
OK.

54
00:03:48,230 --> 00:03:57,140
So inside of my client SIRC index dot J.S. file I'm going to import the redux thung and hook it up to

55
00:03:57,140 --> 00:04:00,460
our create store call right here as a middleware.

56
00:04:00,470 --> 00:04:04,940
Now again we'll talk about exactly what redux thunk is doing but we're going to hold off on discussing

57
00:04:04,940 --> 00:04:06,450
it in depth for right now.

58
00:04:06,760 --> 00:04:15,980
So I'm going to import redux thung from redux dash sunk and then we're going to pass that thing to the

59
00:04:16,010 --> 00:04:18,020
applied middleware call right here.

60
00:04:18,320 --> 00:04:24,840
So passen redux Thank like so okay.

61
00:04:24,890 --> 00:04:29,130
Next we're going to create an action creator inside of our project.

62
00:04:29,300 --> 00:04:35,450
Remember action creators are where we somehow initiate change inside of the redux side of our application.

63
00:04:35,600 --> 00:04:40,430
So they are used to kind of modify the state that is contained inside of a redux store.

64
00:04:40,430 --> 00:04:46,070
Again if you're here kind of assuming that these terms are familiar at least somewhat I am going to

65
00:04:46,070 --> 00:04:49,970
assume that you may not be familiar with redux thunk if you're not that's totally fine we'll be going

66
00:04:50,000 --> 00:04:51,230
over that from scratch.

67
00:04:51,230 --> 00:04:56,170
But for these general the redux terms just kind of assuming that you are familiar with them.

68
00:04:56,780 --> 00:05:02,360
So to create an action Creator I'm going to make a new folder inside of my SIRC directory that's going

69
00:05:02,360 --> 00:05:07,370
to be responsible for housing all the code around all of our different action creators.

70
00:05:07,400 --> 00:05:12,560
So inside the sarcy directory I'll make a new folder called actions.

71
00:05:13,100 --> 00:05:19,940
And then inside if you're going to create our first action creator inside of a file called index Geass

72
00:05:21,740 --> 00:05:26,090
now for this first action creator we put together we're going to put it right into this file.

73
00:05:26,180 --> 00:05:30,800
But immediately after we finish this entire like Hetter thing we're going to come back here and do a

74
00:05:30,800 --> 00:05:36,170
little bit of a refactor to make sure that all of our different action creators are well organized inside

75
00:05:36,170 --> 00:05:37,350
the actions directory.

76
00:05:37,550 --> 00:05:40,540
So for right now everything inside of index not just.

77
00:05:40,640 --> 00:05:44,450
But very shortly we will come back and refactor this stuff.

78
00:05:44,450 --> 00:05:44,710
OK.

79
00:05:44,720 --> 00:05:48,660
So at the very top I'm first going to import the access library.

80
00:05:48,830 --> 00:05:51,880
Remember we use X to make Ajax requests.

81
00:05:51,870 --> 00:05:58,190
So import Axel's from Axel's and then I'm going to define our action creator.

82
00:05:58,460 --> 00:06:01,520
I'm going to call this thing fetch user like so

83
00:06:05,130 --> 00:06:05,870
now right now.

84
00:06:05,910 --> 00:06:11,010
Just like I said that we're going to place all of our action creator code inside this index file and

85
00:06:11,010 --> 00:06:12,350
then refactor it later.

86
00:06:12,450 --> 00:06:16,360
We're going to do something not quite similar with the action types.

87
00:06:16,470 --> 00:06:22,400
So we are going to declare our action types in a separate file inside of our actions directory still.

88
00:06:22,470 --> 00:06:29,460
So inside the actions directory will make a new file called types J us and then inside of here I'm going

89
00:06:29,460 --> 00:06:34,170
to create an X for a new action type called fetch user.

90
00:06:34,300 --> 00:06:40,620
So say export Konst fetch user tools fetch user.

91
00:06:41,220 --> 00:06:46,840
So now we'll immediately import this type into our index file inside the actions directory.

92
00:06:47,190 --> 00:06:58,940
So back inside of index on J.S. we will import fetch user from types like so OK this is looking pretty

93
00:06:58,940 --> 00:07:00,070
good at this point.

94
00:07:00,080 --> 00:07:04,750
Now again we're going to be making use of x to make this network request.

95
00:07:04,760 --> 00:07:11,960
So inside of art the actual crater and side effects user I would call X-posts dot get because we want

96
00:07:11,960 --> 00:07:17,440
to make a get request to our back and then we're going to pass in the route that we care about.

97
00:07:17,450 --> 00:07:19,040
So the route to our API.

98
00:07:19,400 --> 00:07:24,380
Remember we just looked at that route that route that route handler in the last section.

99
00:07:24,590 --> 00:07:30,230
If we go back to our route route directory and find the author route start G-S file at the bottom of

100
00:07:30,230 --> 00:07:31,080
that thing.

101
00:07:31,310 --> 00:07:37,030
We found that we had that route handler right here that could automatically return the current user

102
00:07:37,220 --> 00:07:41,550
if we made a get type request to API slash current user.

103
00:07:42,040 --> 00:07:51,830
So back inside the SIRC actions index touchiest file we will make a get type request to API slash current

104
00:07:51,890 --> 00:07:54,080
user like so.

105
00:07:54,140 --> 00:07:55,170
Now really important.

106
00:07:55,200 --> 00:08:00,430
Remember we're only putting the relative path to our backend server here.

107
00:08:00,470 --> 00:08:05,660
This goes back to that whole discussion we had about how relative paths are working inside of our application

108
00:08:06,000 --> 00:08:07,370
in the development environment.

109
00:08:07,370 --> 00:08:13,340
We make use of our proxy for the request on the API and then the proxy will send a response back to

110
00:08:13,340 --> 00:08:14,810
the re-act application.

111
00:08:14,810 --> 00:08:17,410
And then in production there is no proxy.

112
00:08:17,420 --> 00:08:24,290
There is no Create react up server that whole proxy thing falls away and a request to API slash current

113
00:08:24,290 --> 00:08:27,540
user would go directly to our express backend.

114
00:08:27,560 --> 00:08:32,930
So before we go any further than this I want to make sure that we change over to our package not just

115
00:08:32,930 --> 00:08:38,510
on file inside of our client project and make sure that we've already got a proxy rule put together

116
00:08:38,840 --> 00:08:44,100
for handling this request right here and Simeonoff to our real express backend.

117
00:08:44,180 --> 00:08:50,980
So inside of our client directory I'll find the package not just some file inside of here.

118
00:08:50,990 --> 00:08:53,630
I should already see our existing proxy rule.

119
00:08:53,720 --> 00:08:55,090
So there it is right there.

120
00:08:55,220 --> 00:09:01,610
So we're going to add on one additional proxy rule to make sure that any request to our API successfully

121
00:09:01,610 --> 00:09:03,290
gets forwarded on to localhost.

122
00:09:03,310 --> 00:09:06,450
5000 OK.

123
00:09:06,510 --> 00:09:11,670
Now I am going to say that I don't really want to have to add on a separate proxy rule for every last

124
00:09:11,730 --> 00:09:15,610
API we API route that we tried to make requests to.

125
00:09:15,630 --> 00:09:21,150
I really want to just set up like as few rules as possible and kind of have everything just figure itself

126
00:09:21,150 --> 00:09:23,010
out from there.

127
00:09:23,010 --> 00:09:28,380
So keeping that in mind we're going to add a second rule to the proxy object the route that we're going

128
00:09:28,380 --> 00:09:29,140
to watch for.

129
00:09:29,160 --> 00:09:32,740
We'll be slash API slash star.

130
00:09:33,080 --> 00:09:39,210
And so with this rule right here with this rule saying start here that means if any request whatsoever

131
00:09:39,420 --> 00:09:46,740
comes from the reac saw the application looking for API slash current user or API slash surveys or API

132
00:09:46,740 --> 00:09:52,570
slash anything else at all just go ahead and forward it on to the Express API.

133
00:09:52,920 --> 00:09:54,910
So we'll instruct the rule.

134
00:09:55,020 --> 00:09:56,560
That is what it should happen.

135
00:09:56,580 --> 00:10:05,110
By adding on target of HTP slash slash localhost Colan 5000 like so.

136
00:10:05,940 --> 00:10:10,830
So with this single rule right here we don't have to worry about coming and adding on and additional

137
00:10:10,980 --> 00:10:16,620
proxy rule for every API request we make just this one right here will catch everything that goes to

138
00:10:16,920 --> 00:10:20,430
API slash anything.

139
00:10:20,430 --> 00:10:20,720
OK.

140
00:10:20,740 --> 00:10:24,030
So that definitely is going to save us some time in the future because we don't have to worry about

141
00:10:24,030 --> 00:10:29,670
all this proxy stuff again for essentially the entire course which is definitely a big help.

142
00:10:30,120 --> 00:10:31,820
So let's close out the package.

143
00:10:31,870 --> 00:10:38,220
It's on file and then we're back at our action creator right here now very shortly we're going to start

144
00:10:38,220 --> 00:10:40,750
talking about that redux thunked library.

145
00:10:40,770 --> 00:10:45,970
We're also going to make sure that this request that we're making here makes use of that async await

146
00:10:46,020 --> 00:10:50,550
syntax that we spoke about very previously in a many videos ago.

147
00:10:50,550 --> 00:10:54,900
So again there's like a lot of topics that we're covering here simultaneously.

148
00:10:54,900 --> 00:10:57,050
So with that in mind I want to take a quick break.

149
00:10:57,060 --> 00:11:01,260
When we come back we're going to start talking about some of the basics of redux thunk and we're also

150
00:11:01,260 --> 00:11:03,450
going to talk about how we use redux thunked.

151
00:11:03,570 --> 00:11:10,290
Along with that async await syntax for handling asynchronous requests or handling promises like what's

152
00:11:10,290 --> 00:11:11,960
returned from this thing right here.

153
00:11:12,060 --> 00:11:16,840
So let's continue in the next section and start talking about those two additional topics.