1 00:00:00,690 --> 00:00:01,523 Instructor: In the last section, 2 00:00:01,523 --> 00:00:03,690 we hooked up Redux Thunk. 3 00:00:03,690 --> 00:00:06,480 Redux Thunk is a middleware that allows us to 4 00:00:06,480 --> 00:00:08,820 return a function from an action creator 5 00:00:08,820 --> 00:00:10,920 instead of an action. 6 00:00:10,920 --> 00:00:14,130 That function will then automatically be called whenever 7 00:00:14,130 --> 00:00:18,000 we return the function with the dispatch method from Redux. 8 00:00:18,000 --> 00:00:19,830 So this function is automatically called 9 00:00:19,830 --> 00:00:22,710 for us with the dispatch method. 10 00:00:22,710 --> 00:00:25,860 The dispatch method is the method inside 11 00:00:25,860 --> 00:00:29,220 of Redux that accepts an action and forwards it off 12 00:00:29,220 --> 00:00:32,040 to all the different reducers we have in our application. 13 00:00:32,040 --> 00:00:33,360 In other words, it's basically 14 00:00:33,360 --> 00:00:36,180 like the main pipeline of Redux. 15 00:00:36,180 --> 00:00:39,239 The purpose of Redux Thunk is to allow us to 16 00:00:39,239 --> 00:00:42,540 dispatch multiple different actions inside 17 00:00:42,540 --> 00:00:43,860 of an action creator. 18 00:00:43,860 --> 00:00:47,160 So with Redux Thunk, we are not limited to a single action, 19 00:00:47,160 --> 00:00:49,770 we can dispatch as many as we want. 20 00:00:49,770 --> 00:00:51,300 And we can also insert a bunch 21 00:00:51,300 --> 00:00:53,460 of other logic in here as well. 22 00:00:53,460 --> 00:00:56,730 So in our case, we can handle both the different cases 23 00:00:56,730 --> 00:00:59,700 in here, for whether or not the request is good and bad. 24 00:00:59,700 --> 00:01:00,810 And if the request is good 25 00:01:00,810 --> 00:01:04,620 we can also handle all these different side effects as well. 26 00:01:04,620 --> 00:01:07,080 This is all thanks to Redux Thunk. 27 00:01:07,080 --> 00:01:09,180 One thing to really keep in mind here is that 28 00:01:09,180 --> 00:01:12,420 with a normal action, whenever we turn an object 29 00:01:12,420 --> 00:01:15,180 it's a very kind of synchronous operation, right? 30 00:01:15,180 --> 00:01:17,190 That action is taken and it's immediately 31 00:01:17,190 --> 00:01:19,890 sent off to all the different reducers. 32 00:01:19,890 --> 00:01:23,610 With Redux Thunk, there is no synchronous action here. 33 00:01:23,610 --> 00:01:26,220 The function will be called with dispatch 34 00:01:26,220 --> 00:01:27,540 but we can wait as long 35 00:01:27,540 --> 00:01:30,690 as we want to dispatch an action. 36 00:01:30,690 --> 00:01:31,950 We don't have to do it right away. 37 00:01:31,950 --> 00:01:33,903 We can do it at any time we want. 38 00:01:35,250 --> 00:01:38,050 So let's see what it looks like in action by 39 00:01:39,570 --> 00:01:41,610 taking care of the first step in here; 40 00:01:41,610 --> 00:01:45,270 which is to submit an email and password to our server. 41 00:01:45,270 --> 00:01:47,430 Now, one thing to really pay attention to here is 42 00:01:47,430 --> 00:01:49,170 that the server that we're making reference to 43 00:01:49,170 --> 00:01:51,180 is not the webpack server. 44 00:01:51,180 --> 00:01:54,060 You know it's not the server that's hosting our client here. 45 00:01:54,060 --> 00:01:55,890 It is our API server. 46 00:01:55,890 --> 00:01:57,780 It is the server that's handling all that 47 00:01:57,780 --> 00:01:59,880 authentication logic for us. 48 00:01:59,880 --> 00:02:01,350 And it's actually, as a matter of fact, 49 00:02:01,350 --> 00:02:05,163 not currently running in our dev environment. 50 00:02:06,330 --> 00:02:07,950 So in order to make a request to it 51 00:02:07,950 --> 00:02:10,620 we need to first start the server up. 52 00:02:10,620 --> 00:02:14,100 So I'm gonna flip back over to my terminal and right now 53 00:02:14,100 --> 00:02:15,930 you know for sure we're running our dev server 54 00:02:15,930 --> 00:02:18,660 or our webpack server, our kind of content server 55 00:02:18,660 --> 00:02:21,300 that serves up the JavaScript application 56 00:02:21,300 --> 00:02:24,379 but we're not running the application that connects 57 00:02:24,379 --> 00:02:26,280 to Mongo and checks the username and password, you know 58 00:02:26,280 --> 00:02:28,290 all that kind of good stuff. 59 00:02:28,290 --> 00:02:30,390 So it's totally fine to run multiple servers 60 00:02:30,390 --> 00:02:31,920 on your computer at the same time 61 00:02:31,920 --> 00:02:34,203 as long as they're on different ports. 62 00:02:35,340 --> 00:02:38,010 I'm gonna open up a new tab on my terminal. 63 00:02:38,010 --> 00:02:40,710 And if you are running a terminal 64 00:02:40,710 --> 00:02:44,700 like say Windows command line or what have you, where there 65 00:02:44,700 --> 00:02:47,820 you know, there is no concept of tabs, that's no problem. 66 00:02:47,820 --> 00:02:51,693 All you have to do is open up a second Windows prompt. 67 00:02:53,310 --> 00:02:55,563 So I'm gonna navigate to my server directory. 68 00:02:56,820 --> 00:02:58,380 And again, this is the server that we built 69 00:02:58,380 --> 00:03:00,180 in the last section. 70 00:03:00,180 --> 00:03:04,410 And I'm gonna start the server up with npm run dev. 71 00:03:04,410 --> 00:03:06,540 Remember that you also need to be running Mongo 72 00:03:06,540 --> 00:03:07,830 at the same time as well. 73 00:03:07,830 --> 00:03:10,110 I'm already running Mongo in the background 74 00:03:10,110 --> 00:03:11,760 but if you get an error message that says 75 00:03:11,760 --> 00:03:16,620 like cannot connect to Mongo server on 27 01 7 76 00:03:16,620 --> 00:03:19,260 make sure you start your Mongo server up as well. 77 00:03:19,260 --> 00:03:24,003 You can do that by executing the command mongo d. 78 00:03:25,590 --> 00:03:28,680 And so if I do it, it's gonna say "Address already in use" 79 00:03:28,680 --> 00:03:32,163 because I'm already running an instance of Mongo right now. 80 00:03:33,420 --> 00:03:36,840 Okay, so our API server is up and running. 81 00:03:36,840 --> 00:03:38,550 This is a standalone server. 82 00:03:38,550 --> 00:03:41,790 All it does is handle AJAX requests issued 83 00:03:41,790 --> 00:03:43,680 by our JavaScript client. 84 00:03:43,680 --> 00:03:48,510 And most importantly, the server is listening on Port 30 90. 85 00:03:48,510 --> 00:03:51,900 So this is the port that we will make AJAX request to. 86 00:03:51,900 --> 00:03:55,050 And as long as we make a AJAX request to port 30 90 87 00:03:55,050 --> 00:03:57,120 we should be good to go, we'll get a response back. 88 00:03:57,120 --> 00:03:59,553 Everything should work out just fine for us. 89 00:04:01,020 --> 00:04:03,183 So let's flip back over to Atom. 90 00:04:05,280 --> 00:04:07,590 As convention, what I really like to do 91 00:04:07,590 --> 00:04:11,160 is whenever we have a kind of a very distinct URL 92 00:04:11,160 --> 00:04:14,940 or distinct URL for an API that we want to access 93 00:04:14,940 --> 00:04:18,480 I like to declare it at the top of my action creator's file 94 00:04:18,480 --> 00:04:20,130 as a variable that I usually will call something 95 00:04:20,130 --> 00:04:23,880 like root URL, or you might also call it like API URL. 96 00:04:23,880 --> 00:04:25,740 It's totally up to you. 97 00:04:25,740 --> 00:04:30,740 And inside of here, I just put the URL of my API server. 98 00:04:30,900 --> 00:04:35,900 So for us, it is always gonna be localhost port 30 90. 99 00:04:38,670 --> 00:04:40,650 So again, we're trying to achieve step one here. 100 00:04:40,650 --> 00:04:43,290 We just set the server up, we're good to go there 101 00:04:43,290 --> 00:04:46,080 but we need to actually submit the email and password. 102 00:04:46,080 --> 00:04:50,970 And so this will take the form of an AJAX Post request. 103 00:04:50,970 --> 00:04:54,630 To make a post request, we need access to the Axios library. 104 00:04:54,630 --> 00:04:57,900 Just as we've used several, several times before, 105 00:04:57,900 --> 00:04:59,673 we've made use of Axios. 106 00:05:00,540 --> 00:05:02,430 So Axios is a third party library 107 00:05:02,430 --> 00:05:03,810 which means we're gonna have to flip back 108 00:05:03,810 --> 00:05:07,140 over to our terminal, install it. 109 00:05:07,140 --> 00:05:10,440 I'm gonna make sure that I am on my webpack tab. 110 00:05:10,440 --> 00:05:13,170 So, I'm on my webpack directory here. 111 00:05:13,170 --> 00:05:15,600 I'm gonna stop my webpack server, 112 00:05:15,600 --> 00:05:18,870 making sure that I'm still in my client directory. 113 00:05:18,870 --> 00:05:22,583 And I'll run an npm install, save Axios. 114 00:05:27,180 --> 00:05:28,650 Do make sure that you're installing this 115 00:05:28,650 --> 00:05:31,830 inside the client directory and not the server directory. 116 00:05:31,830 --> 00:05:34,590 Obviously, if you install it in the server directory 117 00:05:34,590 --> 00:05:37,340 you know it's totally separate project from our client. 118 00:05:39,060 --> 00:05:41,280 All right, so it looks like that installed a-okay. 119 00:05:41,280 --> 00:05:42,990 I'm going to start the server back up 120 00:05:42,990 --> 00:05:47,990 with npm run start and webpack comes back up for us. 121 00:05:49,050 --> 00:05:49,883 Awesome. 122 00:05:51,570 --> 00:05:52,980 And so we've made use of Axios 123 00:05:52,980 --> 00:05:55,230 a couple times before, nothing too crazy here. 124 00:05:55,230 --> 00:05:59,733 At the top, we'll import Axios from Axios. 125 00:06:01,110 --> 00:06:05,220 And then to submit our email and password to the server, 126 00:06:05,220 --> 00:06:06,870 we wanna make a post request. 127 00:06:06,870 --> 00:06:09,813 So we'll use the method axios dot post. 128 00:06:11,040 --> 00:06:15,510 The arguments for this are first the URL that we wanna post 129 00:06:15,510 --> 00:06:17,793 and then the data that we want to post to. 130 00:06:19,650 --> 00:06:23,398 So the URL that we want to post to is going to 131 00:06:23,398 --> 00:06:26,100 be the route URL slash signin. 132 00:06:26,100 --> 00:06:28,409 Remember, these are all routes that we already 133 00:06:28,409 --> 00:06:30,180 put together when we put together our server application. 134 00:06:30,180 --> 00:06:33,023 As a matter of fact, we can check those out really quick. 135 00:06:33,990 --> 00:06:36,060 I'm just gonna pull up our server really quick just 136 00:06:36,060 --> 00:06:37,803 so we can double check on that. 137 00:06:42,600 --> 00:06:44,310 So this is our server, 138 00:06:44,310 --> 00:06:45,690 here's the router for it. 139 00:06:45,690 --> 00:06:48,090 And remember, we made a route handler to 140 00:06:48,090 --> 00:06:51,720 handle the post action to specifically the route signin. 141 00:06:51,720 --> 00:06:53,610 So this is why we're using specifically 142 00:06:53,610 --> 00:06:55,743 that route signin right here. 143 00:06:57,870 --> 00:06:59,350 So we'll post to 144 00:07:02,992 --> 00:07:04,260 root URL and notice 145 00:07:04,260 --> 00:07:07,470 that I'm making use of an ES six template string here. 146 00:07:07,470 --> 00:07:09,720 So I've got the backticks instead 147 00:07:09,720 --> 00:07:12,210 of normal quotes, you know, using backticks here. 148 00:07:12,210 --> 00:07:13,350 That's the character to the left 149 00:07:13,350 --> 00:07:14,943 of the one on your keyboard. 150 00:07:16,290 --> 00:07:18,840 A JavaScript variable that I'm gonna wrap inside 151 00:07:18,840 --> 00:07:21,450 of curly braces and the dollar sign. 152 00:07:21,450 --> 00:07:22,283 And then I'll put 153 00:07:22,283 --> 00:07:25,473 on the rest of the string, which is slash signin. 154 00:07:27,390 --> 00:07:29,550 Then as a second argument, I'm gonna post, 155 00:07:29,550 --> 00:07:31,020 or I'm gonna place, in here the data 156 00:07:31,020 --> 00:07:33,660 that I want to post to this endpoint 157 00:07:33,660 --> 00:07:36,753 which is gonna be the email and the password. 158 00:07:38,130 --> 00:07:40,650 Notice that I'm using the curly braces here. 159 00:07:40,650 --> 00:07:42,840 That means that I'm gonna form an object 160 00:07:42,840 --> 00:07:47,070 that looks something like email, email 161 00:07:47,070 --> 00:07:48,777 and password, password. 162 00:07:50,430 --> 00:07:53,520 Again, another little bit of ES six syntax 163 00:07:53,520 --> 00:07:57,540 we're making use of because the key and the value 164 00:07:57,540 --> 00:07:59,160 are the same exact name. 165 00:07:59,160 --> 00:08:01,353 Email, email, password, password. 166 00:08:02,880 --> 00:08:06,003 So another little ES six shortcut. 167 00:08:07,140 --> 00:08:09,060 Okay, so here's our action creator. 168 00:08:09,060 --> 00:08:10,110 It's looking pretty good. 169 00:08:10,110 --> 00:08:13,320 It's making the post request, everyone's happy. 170 00:08:13,320 --> 00:08:15,000 One last little thing we need to do, we need to 171 00:08:15,000 --> 00:08:18,420 make sure that our actual component, the sign-in component 172 00:08:18,420 --> 00:08:22,140 calls the action creator whenever the form is submitted. 173 00:08:22,140 --> 00:08:24,234 So one last step, let's do it. 174 00:08:24,234 --> 00:08:27,184 I know it's been a pretty long section, so let's get to it. 175 00:08:28,050 --> 00:08:30,810 Back inside the sign-in component. 176 00:08:30,810 --> 00:08:32,760 We've done this process many times before. 177 00:08:32,760 --> 00:08:36,870 We'll import star as actions from 178 00:08:36,870 --> 00:08:40,113 up one up one actions. 179 00:08:42,539 --> 00:08:44,850 And then just another friendly reminder, 180 00:08:44,850 --> 00:08:48,510 the Redux form helper here behaves exactly the same way 181 00:08:48,510 --> 00:08:51,543 as the connect helper, which we've used many times before. 182 00:08:52,950 --> 00:08:55,800 The connect helper has the first argument 183 00:08:55,800 --> 00:08:58,980 of map state to props, which we're not using just yet. 184 00:08:58,980 --> 00:09:01,590 And the second argument, or in this case, the third argument 185 00:09:01,590 --> 00:09:05,100 with Redux form, we pass in the actions variable 186 00:09:05,100 --> 00:09:06,510 and then we get access to all 187 00:09:06,510 --> 00:09:09,483 of our different actions on props inside the component. 188 00:09:11,100 --> 00:09:14,640 So the very last step here, and I know it's been a lot 189 00:09:14,640 --> 00:09:19,400 is we can call this dot props dot signinUser. 190 00:09:20,970 --> 00:09:25,593 And into this we will pass our email and password. 191 00:09:26,880 --> 00:09:29,850 And remember, signinUser expects an object 192 00:09:29,850 --> 00:09:32,130 with email and password, and that's why again, 193 00:09:32,130 --> 00:09:33,830 we're using the curly braces here. 194 00:09:34,860 --> 00:09:37,260 Okay, so lot of code, lot of prep, you know 195 00:09:37,260 --> 00:09:38,490 a lot of different stuff to go to. 196 00:09:38,490 --> 00:09:41,160 Again, I did not say authentication was gonna be easy. 197 00:09:41,160 --> 00:09:43,470 In fact, I said it was gonna be hard. 198 00:09:43,470 --> 00:09:45,360 Let's give this a quick shot in the browser 199 00:09:45,360 --> 00:09:48,840 see how it does, and then move on to the next section. 200 00:09:48,840 --> 00:09:50,940 I'm gonna refresh the page. 201 00:09:50,940 --> 00:09:54,183 I'm gonna put in an email and a password that I know work. 202 00:09:55,144 --> 00:09:57,600 So this is an account that I've already created. 203 00:09:57,600 --> 00:10:00,600 I've got my network request tab open over here 204 00:10:00,600 --> 00:10:02,160 inside a Chrome debugger. 205 00:10:02,160 --> 00:10:05,340 I'm gonna sign in and, uh oh, it looks 206 00:10:05,340 --> 00:10:06,720 like we got a big error here, 207 00:10:06,720 --> 00:10:07,860 so this is pretty interesting. 208 00:10:07,860 --> 00:10:09,660 Let's check out what the error says. 209 00:10:10,740 --> 00:10:15,570 The error says cannot load so and so, 210 00:10:15,570 --> 00:10:16,950 something, something something, 211 00:10:16,950 --> 00:10:19,950 no 'Access-Control-Allow-Origin-Header' 212 00:10:19,950 --> 00:10:22,500 is present on the requested resource. 213 00:10:22,500 --> 00:10:25,590 So, we have a little bit of troubleshooting to do here 214 00:10:25,590 --> 00:10:28,140 and this is one of the really interesting things 215 00:10:28,140 --> 00:10:31,230 around the kind of server setup that we've done 216 00:10:31,230 --> 00:10:33,900 that is very important to be very aware of. 217 00:10:33,900 --> 00:10:36,810 So let's tackle this error inside the next section. 218 00:10:36,810 --> 00:10:37,760 I'll see you there.