1 00:00:01,350 --> 00:00:02,183 Narrator: In the last section 2 00:00:02,183 --> 00:00:04,200 we put together our signup action creator 3 00:00:04,200 --> 00:00:05,790 or at least some scaffolding for it. 4 00:00:05,790 --> 00:00:08,430 And we also spoke a little bit about Redux Thunk. 5 00:00:08,430 --> 00:00:09,330 Redux Thunk is one 6 00:00:09,330 --> 00:00:10,770 of those topics that we're going to be working 7 00:00:10,770 --> 00:00:12,930 with throughout the rest of this application. 8 00:00:12,930 --> 00:00:13,920 So we'll get to see a couple 9 00:00:13,920 --> 00:00:16,410 of different action creators that make use of it 10 00:00:16,410 --> 00:00:17,820 inside this file. 11 00:00:17,820 --> 00:00:19,830 Let's now continue by taking our email 12 00:00:19,830 --> 00:00:23,100 and password that are provided to the signup action creator 13 00:00:23,100 --> 00:00:25,350 and we're going to attempt to post them 14 00:00:25,350 --> 00:00:27,690 over to our backend API. 15 00:00:27,690 --> 00:00:31,560 Now, just so you know, I still have my backend API running 16 00:00:31,560 --> 00:00:33,720 on Port 30 90 right here. 17 00:00:33,720 --> 00:00:35,610 So if you're not running your API, 18 00:00:35,610 --> 00:00:36,450 you're gonna wanna make sure 19 00:00:36,450 --> 00:00:39,360 that you open up a second terminal window, 20 00:00:39,360 --> 00:00:41,700 change over to that server directory and run 21 00:00:41,700 --> 00:00:44,010 that NPM run dev script to make sure 22 00:00:44,010 --> 00:00:46,653 that your server is still running on Port 30 90. 23 00:00:48,960 --> 00:00:51,990 So, now back over inside of my Action Creator file 24 00:00:51,990 --> 00:00:54,330 we're going to import Axios. 25 00:00:54,330 --> 00:00:56,250 We're gonna take the email and password 26 00:00:56,250 --> 00:00:59,193 and we're gonna try to post it over to that backend API. 27 00:01:00,150 --> 00:01:03,220 To get started, I will import Axios at the top 28 00:01:05,459 --> 00:01:07,710 and then, inside my Action creator, 29 00:01:07,710 --> 00:01:11,040 I'm going to call Axios dot post 30 00:01:11,040 --> 00:01:12,813 cuz we're trying to post some data. 31 00:01:14,190 --> 00:01:17,970 And then we're going to make a request to http 32 00:01:17,970 --> 00:01:20,190 colon slash slash 33 00:01:20,190 --> 00:01:22,530 local host 30 90 34 00:01:22,530 --> 00:01:24,063 slash signup. 35 00:01:25,890 --> 00:01:29,340 And as a second argument, we're gonna pass the email 36 00:01:29,340 --> 00:01:31,713 and password inside of a single object. 37 00:01:33,420 --> 00:01:37,110 So I'll add in here email and password and notice 38 00:01:37,110 --> 00:01:39,990 that we're making use of ES 2015 syntax here to 39 00:01:39,990 --> 00:01:43,470 automatically get email and password expanded out to 40 00:01:43,470 --> 00:01:46,173 email email and password password like so. 41 00:01:47,880 --> 00:01:50,670 Now you will notice that we are just de structuring email 42 00:01:50,670 --> 00:01:52,920 and password out of our props right here 43 00:01:52,920 --> 00:01:54,930 or out of the arguments the action creator 44 00:01:54,930 --> 00:01:58,530 and then just kind of restructuring them into a new object. 45 00:01:58,530 --> 00:02:00,510 So one refactor that we're gonna do right now 46 00:02:00,510 --> 00:02:03,150 just to make this function a little bit more clear 47 00:02:03,150 --> 00:02:06,750 we're going to just take the first argument right here. 48 00:02:06,750 --> 00:02:08,340 And rather than trying to de structure 49 00:02:08,340 --> 00:02:10,979 out email and password, we'll carry through that name 50 00:02:10,979 --> 00:02:13,800 of form props to say these are the properties 51 00:02:13,800 --> 00:02:16,860 that the user's trying to sign up with out of our form. 52 00:02:16,860 --> 00:02:20,550 So now we don't have to restructure that into a new object. 53 00:02:20,550 --> 00:02:23,103 We can instead just write form props, like so. 54 00:02:24,570 --> 00:02:25,863 Okay, so that looks good. 55 00:02:27,360 --> 00:02:29,670 Now you'll notice that we are not trying to chain 56 00:02:29,670 --> 00:02:33,210 onto this request with a promise or anything like that. 57 00:02:33,210 --> 00:02:34,043 For right now, 58 00:02:34,043 --> 00:02:36,811 I want to just try calling the signup action creator 59 00:02:36,811 --> 00:02:40,770 and seeing if we can actually sign up successfully. 60 00:02:40,770 --> 00:02:43,650 So we're not gonna try to retrieve the JSON web token 61 00:02:43,650 --> 00:02:45,360 that we get back or anything like that. 62 00:02:45,360 --> 00:02:46,770 We're not gonna dispatch an action 63 00:02:46,770 --> 00:02:49,440 I just want to call that endpoint 64 00:02:49,440 --> 00:02:51,303 and pass in the email and password. 65 00:02:52,380 --> 00:02:55,620 So to call this signup action creator we just added 66 00:02:55,620 --> 00:02:59,430 we need to make sure that we wired up to our signup form. 67 00:02:59,430 --> 00:03:03,210 I'm gonna flip back over to my signup dot js component. 68 00:03:03,210 --> 00:03:06,030 So here's signup right here and we're gonna wire up 69 00:03:06,030 --> 00:03:08,283 that action creator to this component. 70 00:03:10,110 --> 00:03:14,760 To do so at the top I will import the Connect Helper 71 00:03:14,760 --> 00:03:19,717 from react-redux and I will import star as actions from 72 00:03:21,000 --> 00:03:23,850 let's see, up one directory and then actions folder. 73 00:03:23,850 --> 00:03:28,080 So star is actions from up one directory, actions. 74 00:03:28,080 --> 00:03:29,610 And you know what actually, my mistake 75 00:03:29,610 --> 00:03:31,260 we actually have two directories here. 76 00:03:31,260 --> 00:03:35,010 So it's going to be dot dot slash, dot dot slash 77 00:03:35,010 --> 00:03:37,200 to go into the components folder and then 78 00:03:37,200 --> 00:03:39,483 up to SRC and then into actions. 79 00:03:41,490 --> 00:03:44,340 So now we can go down to the bottom of the file 80 00:03:44,340 --> 00:03:46,563 and wire up the action creator. 81 00:03:47,550 --> 00:03:49,380 So down at the bottom. 82 00:03:49,380 --> 00:03:51,180 I'll find the export default statement 83 00:03:51,180 --> 00:03:54,480 that we have right now with the redux form helper. 84 00:03:54,480 --> 00:03:56,940 So this is kind of a little bit awkward right here. 85 00:03:56,940 --> 00:04:01,080 We need to wire up redux form along with the connect helper 86 00:04:01,080 --> 00:04:03,690 and they both have that really strange syntax 87 00:04:03,690 --> 00:04:06,600 where we call redux form or connect. 88 00:04:06,600 --> 00:04:10,067 And then we have the second set of parentheses for signup. 89 00:04:10,067 --> 00:04:13,530 Now, we can definitely write out, as it stands right now 90 00:04:13,530 --> 00:04:16,178 we can add in the connect helper without trying to 91 00:04:16,178 --> 00:04:19,470 use any other helper methods or anything like that. 92 00:04:19,470 --> 00:04:21,000 The problem is that the syntax 93 00:04:21,000 --> 00:04:23,730 for it is gonna look a little bit strange. 94 00:04:23,730 --> 00:04:27,060 So rather than trying to like fit in the connect helper here 95 00:04:27,060 --> 00:04:30,390 and end up with a whole big mess of parentheses 96 00:04:30,390 --> 00:04:33,570 we're going to use a helper function that is provided 97 00:04:33,570 --> 00:04:35,760 to us by redux itself. 98 00:04:35,760 --> 00:04:38,850 That's going to allow us to write out the signup component 99 00:04:38,850 --> 00:04:41,730 with the redux form function and the connect function 100 00:04:41,730 --> 00:04:44,910 with a little bit easier to read syntax. 101 00:04:44,910 --> 00:04:46,290 So let's take a quick pause right here. 102 00:04:46,290 --> 00:04:48,570 We're gonna continue the next section and we'll add 103 00:04:48,570 --> 00:04:50,940 in another little helper that's gonna allow us to write 104 00:04:50,940 --> 00:04:53,580 out all these higher order components 105 00:04:53,580 --> 00:04:55,170 of redux form and connect. 106 00:04:55,170 --> 00:04:58,890 Without adding in 20 dozen different sets of parentheses. 107 00:04:58,890 --> 00:05:01,340 So quick break and I'll see you in just a minute.