1 00:00:00,830 --> 00:00:05,850 The last section we wired up read form to our survey form component but we still don't really have a 2 00:00:05,850 --> 00:00:08,490 good idea of you know what that's done for us. 3 00:00:08,550 --> 00:00:12,780 All right we wired this thing up but how do we actually make use of redux form inside of here. 4 00:00:12,810 --> 00:00:17,970 So just to figure out how redux form works we're going to take a quick little diversion inside the section. 5 00:00:18,300 --> 00:00:24,270 We're going to say that you know we know we understand the survey form is supposed to show the survey 6 00:00:24,270 --> 00:00:31,710 fields components and each survey field is supposed to be responsible for somehow showing a label in 7 00:00:31,710 --> 00:00:33,150 a text input to our user. 8 00:00:33,270 --> 00:00:38,400 But for just this section we're going to say forget about those and instead I want to figure out how 9 00:00:38,400 --> 00:00:43,170 to show a text input inside of my survey form component. 10 00:00:43,170 --> 00:00:48,420 Once we figure out that very basic usage of redux form we will then refactor our code to have all the 11 00:00:48,420 --> 00:00:50,150 separate survey fields instead. 12 00:00:50,290 --> 00:00:54,810 OK so let's get to our plan we're going to start simple get something working inside of survey form 13 00:00:55,050 --> 00:00:58,060 and then refactor it out to our separate components. 14 00:00:58,490 --> 00:01:00,430 So don't change back to my code editor. 15 00:01:00,750 --> 00:01:03,420 I'm still inside the survey form the genius file. 16 00:01:03,420 --> 00:01:08,580 I'm going to find the redux form import statement and I'm going to add one additional import to this 17 00:01:08,580 --> 00:01:09,110 thing. 18 00:01:09,360 --> 00:01:16,470 So in addition to the redux form helper I'm also going to pull out the field component the field component 19 00:01:16,470 --> 00:01:25,380 is a helper provided by redux form for rendering absolutely any type any type of traditional HMO form 20 00:01:25,410 --> 00:01:26,250 element. 21 00:01:26,250 --> 00:01:34,500 And so I'm talking about like text areas text inputs file inputs checkboxes radio buttons dropdown it's 22 00:01:34,560 --> 00:01:39,810 all those types of things can all be somehow rendered or represented by this field component. 23 00:01:39,990 --> 00:01:44,540 So you can kind of think of this field component here as being like a Swiss Army knife of sorts. 24 00:01:44,580 --> 00:01:51,480 It's like a component that we can use to show any type of different input or any type of different HDMI 25 00:01:51,570 --> 00:01:55,170 elements that will somehow collect input from our user. 26 00:01:55,200 --> 00:02:00,240 So let's try showing this thing inside of our component because again it is a reactive component and 27 00:02:00,240 --> 00:02:01,700 we'll see what happens. 28 00:02:02,280 --> 00:02:05,770 So place the field let's save the file and you know what. 29 00:02:05,830 --> 00:02:07,990 Let's let's just see what happens inside the browser. 30 00:02:08,010 --> 00:02:09,370 Let's see how this goes. 31 00:02:09,410 --> 00:02:12,330 So change back over. 32 00:02:12,690 --> 00:02:13,530 And when I do. 33 00:02:13,560 --> 00:02:18,330 Looks like we might get a nice big error message so I don't expect this to say something like cannot 34 00:02:18,330 --> 00:02:21,970 render element OK so element type is invalid expected a string. 35 00:02:22,020 --> 00:02:22,260 OK. 36 00:02:22,260 --> 00:02:26,120 So clearly using the field by itself doesn't quite work which is totally fine. 37 00:02:26,400 --> 00:02:31,440 So like I just said the field component can be thought of as like a Swiss Army knife of sorts that has 38 00:02:31,440 --> 00:02:33,270 a lot of different capabilities. 39 00:02:33,450 --> 00:02:37,590 But in order for you to make use of those in order for you to actually make use of the fuel component 40 00:02:37,890 --> 00:02:43,880 you have to provide the field components some number of minimum props to tell it how to render itself. 41 00:02:44,160 --> 00:02:46,870 So by itself the fuel component really does nothing. 42 00:02:46,890 --> 00:02:51,310 We have to give it a lot of different instructions to tell it how to behave. 43 00:02:51,420 --> 00:02:54,270 So we're going to pass this thing a couple of different props. 44 00:02:54,270 --> 00:02:57,390 First we're going to give it a type of text. 45 00:02:57,570 --> 00:03:08,420 We're going to give it a name of survey title and we're going to give it a component of input like so. 46 00:03:08,420 --> 00:03:11,810 Now we'll talk about these different props and what they are for in just a second. 47 00:03:11,820 --> 00:03:14,490 But right now let's just say this file and see what happens. 48 00:03:14,490 --> 00:03:22,050 Now when our application refreshes so we get our refresh and when we do I should now see a nice text 49 00:03:22,080 --> 00:03:24,530 input appear on the screen that I can type into. 50 00:03:24,840 --> 00:03:25,170 OK. 51 00:03:25,210 --> 00:03:27,360 That's the field component in practice. 52 00:03:27,540 --> 00:03:30,960 Let's talk about what's going on with that a little bit more in detail. 53 00:03:30,960 --> 00:03:35,100 First off we pass it a type We'll talk about the type in just one second. 54 00:03:35,130 --> 00:03:38,190 Instead let's kind of focus on the name property right here. 55 00:03:38,400 --> 00:03:45,090 So the name property I passed in a string of survey title the name property can be absolutely any string 56 00:03:45,090 --> 00:03:45,900 that we wish. 57 00:03:45,900 --> 00:03:50,690 So I just randomly off the top of my head decided to use survey title right here. 58 00:03:50,910 --> 00:03:58,380 The name property tells redux form that we have one piece of data being produced by our form called 59 00:03:58,440 --> 00:04:00,300 survey title. 60 00:04:00,300 --> 00:04:06,090 So once we start typing into this field like as soon as we start typing on our keyboard redux form is 61 00:04:06,090 --> 00:04:08,940 going to see that someone's typing in this field. 62 00:04:08,940 --> 00:04:13,590 It's going to take the value out of that input like the value that we're typing in and it's going to 63 00:04:13,620 --> 00:04:20,910 automatically store it inside of our redux store under a key of survey title and we'll see that in practice 64 00:04:20,910 --> 00:04:23,190 in just a second. 65 00:04:23,190 --> 00:04:28,590 Now the third property here of component right now is a string of input. 66 00:04:28,680 --> 00:04:30,620 And so it tells redux form. 67 00:04:30,750 --> 00:04:37,110 It tells the field I want this to appear as an HMO input tag like just a normal input tag like that 68 00:04:37,110 --> 00:04:38,850 right there. 69 00:04:39,030 --> 00:04:45,180 With that in mind knowing that this specifies the type of HMO tag we want to show maybe the type over 70 00:04:45,180 --> 00:04:47,940 here is the far left starts to make a little bit more sense. 71 00:04:47,970 --> 00:04:53,520 So we're showing a component of input and the input should be of type text. 72 00:04:53,640 --> 00:04:59,520 Remember that input tags can have many different types some common type of like say file picker to show 73 00:04:59,580 --> 00:05:05,510 a which is still input tag but that is a type of file picker which would show a file picker to our users. 74 00:05:05,520 --> 00:05:12,060 So again that's three different required properties to always pass into these field elements. 75 00:05:12,060 --> 00:05:17,760 Now this is again the most basic usage of a field element that we're going to get to further customize 76 00:05:17,760 --> 00:05:19,460 this field and how it behaves. 77 00:05:19,500 --> 00:05:27,360 A very common practice is to replace a component right here with not a string saying what type of vanilla 78 00:05:27,380 --> 00:05:33,720 HTL component we want to show or ational tag but instead to replace it with some type of custom re-act 79 00:05:33,720 --> 00:05:35,710 component that we will write. 80 00:05:35,730 --> 00:05:42,270 So for example we might replace that component Propp of input right there with a custom component we 81 00:05:42,270 --> 00:05:45,840 make like say one called survey fields. 82 00:05:46,350 --> 00:05:47,670 So we might see something like. 83 00:05:47,670 --> 00:05:53,790 Survey field like so then you and I would put together the survey fields component and kind of teach 84 00:05:53,790 --> 00:05:56,010 it how to work nicely with redux form. 85 00:05:56,040 --> 00:05:58,700 And that's exactly what we're going to do in just a little bit. 86 00:05:58,830 --> 00:06:03,900 But right now how about we just stick with a component of type input. 87 00:06:03,900 --> 00:06:04,910 Okay. 88 00:06:05,690 --> 00:06:05,970 OK. 89 00:06:05,970 --> 00:06:10,220 So now the next thing I want to look at is how we actually submit a form. 90 00:06:10,260 --> 00:06:14,670 So sure maybe it's enough that we are actually putting a field tag here we're recording some input from 91 00:06:14,670 --> 00:06:19,860 our user but at some point in time we want to actually submit the form and create a new survey or create 92 00:06:19,870 --> 00:06:26,580 new campaign whatever it is by using the data that the user entered in this field right here to do so. 93 00:06:26,580 --> 00:06:29,340 We will wrap our field with the form tag 94 00:06:33,400 --> 00:06:38,210 and then inside this form tag we're going to add a prop on submit. 95 00:06:39,460 --> 00:06:42,380 And then this next part is going to be just a little bit complicated. 96 00:06:42,440 --> 00:06:45,000 OK just a little bit country is going to look just a little bit nasty. 97 00:06:45,040 --> 00:06:47,720 Let's write the code out and we'll talk about what it's doing. 98 00:06:47,740 --> 00:06:54,260 I'm going to say this doc props handles submit and I'm going to pass it. 99 00:06:54,280 --> 00:06:55,290 This is a function right here. 100 00:06:55,300 --> 00:07:02,740 I'm going to pass it an arrow function my own going to save values arrow cancel dot log values and then 101 00:07:02,740 --> 00:07:07,210 very quickly I get a new line to sing to make sure you can easily read it. 102 00:07:07,420 --> 00:07:07,810 OK. 103 00:07:07,870 --> 00:07:08,470 There we go. 104 00:07:12,300 --> 00:07:18,150 The props dot handle submit function right here is a function that is provided to us automatically by 105 00:07:18,150 --> 00:07:20,860 the redux form helper that we wired up at the bottom. 106 00:07:20,860 --> 00:07:25,500 So remember in the past we had said that the Kinect tag can kind of manipulate the props that are being 107 00:07:25,500 --> 00:07:26,900 passed to our component. 108 00:07:27,150 --> 00:07:29,900 And so that's exactly what the redux for untagged is doing here as well. 109 00:07:30,060 --> 00:07:36,880 It's adding some additional props to the survey form one of those props is called handle Samit. 110 00:07:36,900 --> 00:07:43,350 If we call handle submit and pass it a function of our own the function that we pass to it will be automatically 111 00:07:43,350 --> 00:07:46,920 called whenever a user attempts to submit our form. 112 00:07:47,010 --> 00:07:53,040 And when I say Samit I mean like a very classic h TMail style forms middle's like pressing the enter 113 00:07:53,040 --> 00:07:56,670 key or clicking a button that says Submit or something like that. 114 00:07:56,670 --> 00:07:59,960 So speaking of which let's do that right now let's add on a button. 115 00:08:02,300 --> 00:08:09,890 That contains the text submit and we'll give it a type of cement as well. 116 00:08:09,890 --> 00:08:17,030 So now in theory when the user attempts to submit the form that automat or that function that was passed 117 00:08:17,030 --> 00:08:22,010 to us by redux form will be called it internally is going to call the Aero function that we put right 118 00:08:22,010 --> 00:08:25,820 here and I'm not going to say a lot about the error function right here let's just kind of see what 119 00:08:25,820 --> 00:08:26,230 happens. 120 00:08:26,240 --> 00:08:26,820 OK. 121 00:08:27,320 --> 00:08:30,540 So going to save all this will change back over my out. 122 00:08:31,040 --> 00:08:32,930 I can now see the submit button on the screen. 123 00:08:33,140 --> 00:08:38,120 I'm going to add a little bit of text in here and I'm going to click the submit button and I do so do 124 00:08:38,120 --> 00:08:38,450 so. 125 00:08:38,450 --> 00:08:44,330 I see a concert log with a key of the title and a value of the text. 126 00:08:44,330 --> 00:08:46,420 I had put into the input itself. 127 00:08:46,840 --> 00:08:47,130 OK. 128 00:08:47,150 --> 00:08:51,500 So that's pretty much like the entire flow of redux form in a nutshell. 129 00:08:51,500 --> 00:08:59,210 When we add on the on Samit handler to the form and then call handle Samit inside there and provide 130 00:08:59,210 --> 00:09:05,390 our arrow function our arrow function will be called automatically whenever a user submits the form. 131 00:09:05,450 --> 00:09:10,850 And so our arrow function right here would be a fantastic opportunity to take the values out of the 132 00:09:10,850 --> 00:09:17,450 form and save them to get some back end server or process them in some other fashion. 133 00:09:17,450 --> 00:09:21,920 Now the other thing I want to say about the value is object that was passed to us that object that we 134 00:09:21,920 --> 00:09:23,870 saw inside of a console log right here. 135 00:09:23,930 --> 00:09:29,870 You'll notice that we got the value inside that object was the text we had entered into the input but 136 00:09:29,870 --> 00:09:35,210 the key of that object was the name that we had added to the field component. 137 00:09:35,210 --> 00:09:41,510 So again this name property right here is used as kind of like the recordkeeping like when we enter 138 00:09:41,510 --> 00:09:43,520 in some text in the field inputs. 139 00:09:43,520 --> 00:09:48,860 That means we are updating the survey title property and so of course we want to make sure that we pick 140 00:09:48,860 --> 00:09:54,080 the names of all of these fields to be somewhat at least somewhat reasonable somewhat relevant throughout 141 00:09:54,080 --> 00:09:56,120 our application. 142 00:09:56,120 --> 00:09:56,670 Okay. 143 00:09:56,930 --> 00:10:02,180 So I think that's probably enough of a overview of how redux form works and how we kind of make use 144 00:10:02,180 --> 00:10:04,170 of some of these very low level concepts. 145 00:10:04,190 --> 00:10:07,790 Now we still have to figure out some other stuff like say validation and whatnot. 146 00:10:07,790 --> 00:10:09,280 We'll definitely get to that over time. 147 00:10:09,350 --> 00:10:13,670 But right now let's take a pause and when we come back we're going to do a little bit of refactoring 148 00:10:13,670 --> 00:10:19,580 to our form and break it out to use separate survey field components. 149 00:10:19,580 --> 00:10:21,680 So let's take care of that in the next section.