1 00:00:00,750 --> 00:00:06,990 Unless section we've got some experience with redux form by writing up a form tag and a field tag we 2 00:00:06,990 --> 00:00:12,580 then submitted the form by placing a traditional age button that automatically submitted the form. 3 00:00:12,690 --> 00:00:17,880 It ran our arrow function right here and it canceled out all the different values that had been recorded 4 00:00:17,910 --> 00:00:19,470 inside of our form. 5 00:00:19,470 --> 00:00:23,670 So at this point I think we've got a better idea on the basics of redux form and what it's doing for 6 00:00:23,670 --> 00:00:24,340 us. 7 00:00:24,360 --> 00:00:29,460 Again I want to reiterate the fact that no we do not need redux formed to do all this stuff. 8 00:00:29,520 --> 00:00:33,510 We could totally take care of all this stuff by hand but that would just mean that we have to add all 9 00:00:33,510 --> 00:00:35,330 that additional code ourselves. 10 00:00:35,490 --> 00:00:38,090 So we would have to add on event handlers. 11 00:00:38,160 --> 00:00:44,040 We'd have to add on something action Kreator to save the value our own reducer we'd have to wire up 12 00:00:44,040 --> 00:00:45,010 the connect helper. 13 00:00:45,030 --> 00:00:49,560 That means we need maps data props all these different things we'd all have to take care of ourselves 14 00:00:49,830 --> 00:00:53,760 if we wanted to do a very equivalent form. 15 00:00:53,820 --> 00:00:55,480 So now we've got a better idea of how this works. 16 00:00:55,500 --> 00:01:01,310 Let's start refactoring the survey form and kind of extract this field that we just put in here. 17 00:01:01,320 --> 00:01:06,060 Now I've been talking a lot about this separate survey field components that we're going to have several 18 00:01:06,060 --> 00:01:11,960 of and I haven't really made it super clear why we have these multiple separate fields components. 19 00:01:11,970 --> 00:01:17,110 So it's been a little bit of time to figure that out and a look back at our form. 20 00:01:17,220 --> 00:01:21,950 So here it is right here zoom in OK. 21 00:01:21,980 --> 00:01:29,930 So inside of here remember we have these four separate teks inputs survey title the subject line of 22 00:01:29,930 --> 00:01:32,330 the email the email body and recipient list. 23 00:01:32,390 --> 00:01:38,760 Now every single one of these really appears to be some text input and some label above it. 24 00:01:38,760 --> 00:01:45,070 And so we can kind of imagine that yeah we're probably going to have to like four times in a row. 25 00:01:45,110 --> 00:01:48,740 Make a label and make a little text input right here. 26 00:01:48,740 --> 00:01:53,600 And so the idea of making a separate survey Field's component is just so that we don't have to wire 27 00:01:53,600 --> 00:01:57,920 up all these different event handlers and all this kind of stuff four times in a row. 28 00:01:58,150 --> 00:02:06,200 Instead we will just make one single survey Field's component that contains some text input and a label 29 00:02:06,530 --> 00:02:12,080 and some CSSA style it nicely and then we can duplicate that four times in here and get the component 30 00:02:12,080 --> 00:02:12,960 that we're looking for. 31 00:02:13,040 --> 00:02:16,360 OK so that's the idea behind the separate survey fields. 32 00:02:17,450 --> 00:02:21,590 So it doesn't mind let's give this a shot now to start. 33 00:02:21,590 --> 00:02:24,120 We will make a separate survey field component. 34 00:02:24,170 --> 00:02:29,150 We're gonna put just a little bit of very basic stuff inside of it like some very basic markup and we'll 35 00:02:29,150 --> 00:02:33,460 figure out exactly how we're going to use that with redux form. 36 00:02:33,470 --> 00:02:37,160 So back inside my code editor I'm going to find my surveys directory. 37 00:02:37,160 --> 00:02:40,190 I'm going to make a new file inside of there called survey. 38 00:02:40,210 --> 00:02:42,970 Field Yes. 39 00:02:43,370 --> 00:02:47,690 Again I'm going to put a comment at the very top because I think that was kind of helpful with all these 40 00:02:47,690 --> 00:02:49,670 different survey files that we have. 41 00:02:49,730 --> 00:02:58,970 Let's put a comment at the top and say survey field contains logic to render a single label and text 42 00:02:59,120 --> 00:03:05,420 input not to be 100 percent clear because I realized I didn't even just now when I was talking about 43 00:03:05,420 --> 00:03:06,360 the survey field. 44 00:03:06,440 --> 00:03:11,030 The reason that we're making this news several component again is because we're going to customize the 45 00:03:11,030 --> 00:03:15,710 label on here and where the value in the text input is saved through the use of props. 46 00:03:15,710 --> 00:03:15,930 OK. 47 00:03:15,950 --> 00:03:20,430 That's what I really meant to say and I didn't really realize that a hundred percent clear. 48 00:03:20,840 --> 00:03:21,030 All right. 49 00:03:21,030 --> 00:03:26,690 So let's put together some boilerplate for putting together a traditional or just a very conventional 50 00:03:26,930 --> 00:03:31,580 functional re-act component or not don't worry about redux form right now let's just get something on 51 00:03:31,580 --> 00:03:41,990 the screen so import react from react and then I'll immediately export default and arrow function that 52 00:03:41,990 --> 00:03:43,540 returns. 53 00:03:44,360 --> 00:03:45,970 Let's just do it again. 54 00:03:48,130 --> 00:03:57,330 Place a div that shows in text that says you know how about a survey field like so Gaunt's there's our 55 00:03:57,330 --> 00:03:58,180 survey field. 56 00:03:58,210 --> 00:04:02,590 Now I want to import this into our survey form and then we'll start thinking about how we're going to 57 00:04:02,590 --> 00:04:04,820 wired up to redux for him. 58 00:04:04,840 --> 00:04:13,810 So back inside of redux or Scuse me the survey form I will import the survey field from survey field 59 00:04:15,910 --> 00:04:20,440 and then inside of our existing form tag I'm going to delete the field that we have right now entirely 60 00:04:23,310 --> 00:04:27,870 and I'm going to make a separate function to handle the task of rendering these four different fields 61 00:04:27,870 --> 00:04:29,730 that we want side of our application. 62 00:04:29,730 --> 00:04:35,010 Now we don't really have to put this into a separate helper function by really enjoy keeping my render 63 00:04:35,010 --> 00:04:40,650 method pretty small and kind of isolating small chunks of GSX so we don't really have to separate this 64 00:04:40,650 --> 00:04:40,880 out. 65 00:04:40,890 --> 00:04:47,100 But it's kind of good practice that I find leads to better organize class based components in general. 66 00:04:47,340 --> 00:04:52,010 So I get to make a helper function called render fields. 67 00:04:52,110 --> 00:05:01,140 This thing is going to return a div and then for right now we will make sure that we call this dot render 68 00:05:02,400 --> 00:05:06,390 loops under fields from inside of our render function. 69 00:05:06,420 --> 00:05:10,470 So we've got the form tag render fields and then the button. 70 00:05:10,500 --> 00:05:14,490 So now we get to just focus entirely on render fields and we don't have to worry about any of the other 71 00:05:14,490 --> 00:05:15,200 markup in here. 72 00:05:15,210 --> 00:05:20,700 So it is making the subfunctions is nice for kind of isolating very small snippets of GSX you want to 73 00:05:20,700 --> 00:05:22,680 operate on in detail. 74 00:05:23,200 --> 00:05:23,570 OK. 75 00:05:23,640 --> 00:05:30,450 So again we have this survey field component we want this thing to be in charge of somehow showing a 76 00:05:31,050 --> 00:05:34,040 label to our user and the actual text input. 77 00:05:34,050 --> 00:05:39,870 However I just told you two seconds ago like literally two seconds ago that we use the field tag for 78 00:05:39,870 --> 00:05:42,880 showing text inputs like the field tag is our Swiss Army knife. 79 00:05:42,900 --> 00:05:46,640 That thing is in charge of showing our users some amount of text. 80 00:05:46,650 --> 00:05:53,970 Well remember I had said very briefly that we can not only pass a component of a string like that input 81 00:05:53,970 --> 00:05:56,220 that we passed to the field. 82 00:05:56,250 --> 00:05:59,080 We can also pass in a custom component of our own. 83 00:05:59,100 --> 00:06:01,470 And so that's exactly what we're going to do here. 84 00:06:01,470 --> 00:06:08,520 So then the field tag rather than trying to render a h T.M. input by itself will delegate to our survey 85 00:06:08,520 --> 00:06:14,430 field for rendering that HTL input and wiring up the correct event handlers to it. 86 00:06:14,460 --> 00:06:15,540 So that's a lot of words. 87 00:06:15,540 --> 00:06:17,900 Let's see what this looks like in practice. 88 00:06:18,330 --> 00:06:23,620 I'm going to focus right now on rendering our first field just the survey title. 89 00:06:23,700 --> 00:06:28,230 So we're going to make one tag that's going to show just the survey title field. 90 00:06:28,710 --> 00:06:36,580 So inside if you're going to place a field we're going to give it a type of text. 91 00:06:37,020 --> 00:06:44,790 We're going to give it a name of about survey title actually just title by itself is do title. 92 00:06:44,790 --> 00:06:50,800 And then finally we're going to tell it for it's component property rather than selling it saying Hey. 93 00:06:50,800 --> 00:06:55,900 So show input for us which would tell the field to produce a text input. 94 00:06:55,950 --> 00:07:01,350 Instead we're going to tell the field component that we will take care of rendering some input ourselves 95 00:07:01,410 --> 00:07:02,390 like we will handle that. 96 00:07:02,400 --> 00:07:04,060 Don't sweat it. 97 00:07:04,080 --> 00:07:11,210 So for component right here we'll pass in the survey field that we just created. 98 00:07:11,220 --> 00:07:17,250 So now whenever redux form tries to show this field rather than attempting to show some or render some 99 00:07:17,260 --> 00:07:23,670 age itself like the actual text input it's going to call our survey field and just trust us it's going 100 00:07:23,670 --> 00:07:29,610 to say Surely these people whoever is using this library is going to take care of showing the input 101 00:07:29,640 --> 00:07:30,260 now. 102 00:07:30,600 --> 00:07:33,970 So let's save this and see what we have inside of our browser. 103 00:07:34,230 --> 00:07:38,640 When I flip back over to our application now we just have the text that we had placed inside of our 104 00:07:38,640 --> 00:07:40,930 survey field of survey field. 105 00:07:41,160 --> 00:07:46,530 So it's now changed the survey field and we're going to customize that a little bit to properly show 106 00:07:46,530 --> 00:07:48,330 a text input. 107 00:07:48,340 --> 00:07:53,730 So now inside the survey field component rather than showing the text survey field right here I'm going 108 00:07:53,730 --> 00:07:57,720 to show a text and put myself into. 109 00:07:57,900 --> 00:08:00,560 Now as soon as you see me you put this input tag down right here. 110 00:08:00,600 --> 00:08:04,770 As soon as you see me you write that you're probably thinking Whoa hold up Steven hold up just a second. 111 00:08:04,770 --> 00:08:09,450 I thought you said that redux form is going to take care of showing all these inputs and all this stuff 112 00:08:09,450 --> 00:08:10,310 for us. 113 00:08:10,560 --> 00:08:11,800 Well let me be clear. 114 00:08:11,950 --> 00:08:17,400 Redux forum can show these very basic elements for us but that's not really it's strength. 115 00:08:17,400 --> 00:08:23,320 It's strength is wiring up all the different event handlers for watching changes to this input. 116 00:08:23,520 --> 00:08:25,190 That's where its real strength is. 117 00:08:25,290 --> 00:08:32,010 And we still get to take the benefit of that when we finished the wiring up of this survey Field's component. 118 00:08:32,010 --> 00:08:34,220 So at this point let's take a quick break. 119 00:08:34,260 --> 00:08:38,730 We're going to come back in just one second and kind of review where we are and review the next steps 120 00:08:38,730 --> 00:08:40,380 that we need to move forward. 121 00:08:40,620 --> 00:08:45,630 As a reminder a lot of this Reebok's form stuff is pretty complicated so I like kind of taking a little 122 00:08:45,630 --> 00:08:50,010 bit slow here on the first field that we put together to make sure that the way that the stuff all works 123 00:08:50,010 --> 00:08:52,350 together is very clear and distinct. 124 00:08:52,350 --> 00:08:55,170 So let's take a quick break come back the next section. 125 00:08:55,260 --> 00:08:56,520 See it in just a second.