1 00:00:01,380 --> 00:00:02,213 Instructor: In the last section, 2 00:00:02,213 --> 00:00:03,780 we were able to fix up that CORS error, 3 00:00:03,780 --> 00:00:05,430 and now our signup action creator 4 00:00:05,430 --> 00:00:07,756 is able to sign us up to the backend API, 5 00:00:07,756 --> 00:00:12,030 and we are getting back a JSON web token from that API. 6 00:00:12,030 --> 00:00:13,530 So now we need to take the response 7 00:00:13,530 --> 00:00:15,390 that we get back from this request right here, 8 00:00:15,390 --> 00:00:17,760 and make sure that we dispatch an action. 9 00:00:17,760 --> 00:00:20,490 'Cause remember, we are now directly dispatching actions, 10 00:00:20,490 --> 00:00:22,290 'cause we're making use of Redux Thunk 11 00:00:22,290 --> 00:00:24,270 that can be picked up by our reducer, 12 00:00:24,270 --> 00:00:26,329 where we're going to store that token. 13 00:00:26,329 --> 00:00:27,540 To get started, 14 00:00:27,540 --> 00:00:32,540 I'm gonna mark our arrow function right here as being async. 15 00:00:32,729 --> 00:00:34,320 So I'm gonna put the async keyword 16 00:00:34,320 --> 00:00:35,853 right in front of dispatch. 17 00:00:37,110 --> 00:00:39,690 Then I will store the response that we get back 18 00:00:39,690 --> 00:00:41,820 from the post request by writing out, 19 00:00:41,820 --> 00:00:45,333 const response is await axios.post. 20 00:00:46,470 --> 00:00:48,360 Next, underneath that we can make use 21 00:00:48,360 --> 00:00:50,130 of the dispatch function. 22 00:00:50,130 --> 00:00:53,280 So we're going to call dispatch and into that function 23 00:00:53,280 --> 00:00:54,750 we're going to pass the action 24 00:00:54,750 --> 00:00:56,550 that we want to send to all the middlewares 25 00:00:56,550 --> 00:00:59,370 and reducers inside of our application. 26 00:00:59,370 --> 00:01:01,784 Just as before, we do have to assign a type 27 00:01:01,784 --> 00:01:04,379 to the actions that we dispatch. 28 00:01:04,379 --> 00:01:06,910 So I will say type AUTH_USER 29 00:01:08,160 --> 00:01:11,153 and as a payload I will include a token 30 00:01:11,153 --> 00:01:13,710 that we stored inside that response. 31 00:01:13,710 --> 00:01:16,170 Remember that the actual token that we send back 32 00:01:16,170 --> 00:01:19,980 from our backend API is on the token property. 33 00:01:19,980 --> 00:01:21,720 So in order to get a handle on that token 34 00:01:21,720 --> 00:01:25,893 we'll say response.data.token, like so. 35 00:01:27,480 --> 00:01:29,310 Okay. So that's pretty much it. 36 00:01:29,310 --> 00:01:31,530 Now, this is not the only work that we're going to do 37 00:01:31,530 --> 00:01:33,660 inside of our signup action creator. 38 00:01:33,660 --> 00:01:34,620 We also have to make sure that 39 00:01:34,620 --> 00:01:36,540 after user successfully signs up, 40 00:01:36,540 --> 00:01:39,930 we somehow redirect them over to the feature page 41 00:01:39,930 --> 00:01:41,490 inside of our application. 42 00:01:41,490 --> 00:01:43,230 So we're gonna come back to this action creator 43 00:01:43,230 --> 00:01:45,570 in just a moment, but for right now, 44 00:01:45,570 --> 00:01:48,150 let's open up our auth reducer and make sure 45 00:01:48,150 --> 00:01:50,823 that we watch for a type of AUTH_USER. 46 00:01:52,320 --> 00:01:56,013 So in my reducer auth.js file, at the very top, 47 00:01:58,080 --> 00:02:03,080 I'm going to import the AUTH_USER type from actions types. 48 00:02:06,720 --> 00:02:07,950 So it might seem a little bit strange 49 00:02:07,950 --> 00:02:10,710 that we're calling this action AUTH_USER, 50 00:02:10,710 --> 00:02:13,590 as opposed to like, user sign up or anything like that. 51 00:02:13,590 --> 00:02:16,958 But let me tell you a little bit behind the thinking here. 52 00:02:16,958 --> 00:02:20,220 When we spoke about our overall redux state design before 53 00:02:20,220 --> 00:02:22,410 we had said that we would have the one reducer 54 00:02:22,410 --> 00:02:25,320 and it would have a property called authenticated. 55 00:02:25,320 --> 00:02:28,050 By default, authenticated would be an empty string, 56 00:02:28,050 --> 00:02:30,780 and then after user signs in or signs up, 57 00:02:30,780 --> 00:02:32,910 we would put our JSON web token 58 00:02:32,910 --> 00:02:34,920 on the authenticated property. 59 00:02:34,920 --> 00:02:39,240 So the idea behind calling this action type AUTH_USER, 60 00:02:39,240 --> 00:02:41,190 it really means to say that we are just trying 61 00:02:41,190 --> 00:02:43,620 to update this authenticated property. 62 00:02:43,620 --> 00:02:47,460 There's really no idea of signing up and getting a token 63 00:02:47,460 --> 00:02:48,480 inside of our application, 64 00:02:48,480 --> 00:02:51,529 at least from the redux reducer standpoint. 65 00:02:51,529 --> 00:02:53,130 All this reducer cares about 66 00:02:53,130 --> 00:02:55,800 is getting that authenticated piece of state 67 00:02:55,800 --> 00:02:58,710 and so it doesn't really make sense to call it sign up, 68 00:02:58,710 --> 00:03:01,080 or sign in, or anything like that. 69 00:03:01,080 --> 00:03:03,210 All we really just did by making that request 70 00:03:03,210 --> 00:03:05,580 was authenticate our users, 71 00:03:05,580 --> 00:03:07,830 and so that's why we're calling it AUTH_USER. 72 00:03:09,030 --> 00:03:11,613 All right, so now inside of our reducer, 73 00:03:12,930 --> 00:03:15,330 we can put down our switch statement, 74 00:03:15,330 --> 00:03:19,887 look at our action type, and if the case is AUTH_USER, 75 00:03:21,540 --> 00:03:22,870 then we're going to return 76 00:03:23,910 --> 00:03:27,090 all the properties we have inside of our state object, 77 00:03:27,090 --> 00:03:29,010 along with authenticated, 78 00:03:29,010 --> 00:03:30,960 which is going to be the JSON web token 79 00:03:30,960 --> 00:03:34,020 that we just put on the actions payload property. 80 00:03:34,020 --> 00:03:38,703 So authenticated will be action.payload. 81 00:03:40,440 --> 00:03:42,540 Now that we've got this switch statement inside of here 82 00:03:42,540 --> 00:03:46,830 we'll also move the default case into the switch statement. 83 00:03:46,830 --> 00:03:49,650 So I'll say default return state, 84 00:03:49,650 --> 00:03:53,193 and I will remove the bottom return state down here. 85 00:03:54,570 --> 00:03:55,994 Okay, so that looks good. 86 00:03:55,994 --> 00:03:57,930 Let's take a quick pause right here. 87 00:03:57,930 --> 00:03:59,220 We'll come back in the next section. 88 00:03:59,220 --> 00:04:02,130 We still have to do a lot of polish around this signup form. 89 00:04:02,130 --> 00:04:04,173 So we'll continue in the next section.