1 00:00:00,730 --> 00:00:04,440 In the last video we started hooking up redux form to our history create component. 2 00:00:04,480 --> 00:00:09,730 We placed these two field components inside of our component but we very quickly saw this error message 3 00:00:09,730 --> 00:00:15,140 inside of our browser thing that says expected a string or class function but got undefined. 4 00:00:15,460 --> 00:00:19,570 So the reason that we are seeing this is that the field component itself doesn't actually know how to 5 00:00:19,570 --> 00:00:26,350 show a text input or a dropdown or a checkbox or any type of form element in order to tell this field 6 00:00:26,350 --> 00:00:29,190 how to show an actual text input on the screen. 7 00:00:29,230 --> 00:00:36,220 We have to assign a prop to it called component component right here is going to be either a real component 8 00:00:36,310 --> 00:00:42,310 or a function for the field to call this component or the function needs to return some element that 9 00:00:42,310 --> 00:00:44,950 is going to actually be shown on the screen. 10 00:00:44,950 --> 00:00:51,130 So this field element in total is really just about hooking up all of this infrastructure all the stuff 11 00:00:51,130 --> 00:00:56,320 that redux form is actually doing for us when we actually want to show some content or some form element 12 00:00:56,350 --> 00:00:57,210 on the screen. 13 00:00:57,250 --> 00:01:02,680 It is up to us to show the actual input element and customize it in some fashion. 14 00:01:03,200 --> 00:01:08,920 And we do so by making use of the component prop right here so inside of my stream create class I'm 15 00:01:08,920 --> 00:01:15,550 going to add in a helper method called render input and then I'm going to pass a reference to that function 16 00:01:15,580 --> 00:01:17,250 to the component right here. 17 00:01:17,560 --> 00:01:21,960 So this Dom render input and I'm going to do the same thing for the second field as well. 18 00:01:23,610 --> 00:01:27,740 Just render input then inside of render input right here. 19 00:01:27,760 --> 00:01:34,720 I'm going to return a div that says I'm an input like so. 20 00:01:34,750 --> 00:01:36,580 Now clearly that is not in input right. 21 00:01:36,580 --> 00:01:38,020 I think you can agree with me there. 22 00:01:38,140 --> 00:01:40,100 Well I want to prove a little point to you here. 23 00:01:40,150 --> 00:01:43,330 Let's say this or we're going to flip back over to our browser. 24 00:01:43,510 --> 00:01:47,060 When I flip back over I see on the screen twice I'm an input. 25 00:01:47,250 --> 00:01:49,700 So this is a very important lesson to learn. 26 00:01:49,740 --> 00:01:55,020 Remember redux form is about automating all these processes making sure that your form data is inside 27 00:01:55,020 --> 00:02:00,090 the read store getting that data back into the component and then kind of helping you getting that data 28 00:02:00,090 --> 00:02:01,970 into the appropriate input elements. 29 00:02:02,100 --> 00:02:06,760 But at the end of the day redux farm doesn't really know a lot about what you're doing. 30 00:02:06,810 --> 00:02:09,270 It doesn't really know if you are showing a text input. 31 00:02:09,360 --> 00:02:13,350 It doesn't know if you're showing a dropdown it doesn't know if you're showing a checkbox it doesn't 32 00:02:13,350 --> 00:02:16,290 know if you're not showing any input element at all. 33 00:02:16,290 --> 00:02:20,130 Redux farm is just kind of going to assume that you are doing the correct thing. 34 00:02:20,400 --> 00:02:25,860 So in this case for us to do the correct thing we are really supposed to return an input element from 35 00:02:26,310 --> 00:02:30,040 whatever function we passed to the component Propp right here. 36 00:02:30,300 --> 00:02:36,210 So to do things the right way instead of returning a div we're going to return an input element like 37 00:02:36,210 --> 00:02:37,980 so. 38 00:02:38,010 --> 00:02:42,150 So I'm going to save this and I'll flip back over to my browser and I can see that now had those two 39 00:02:42,210 --> 00:02:43,410 input elements. 40 00:02:43,410 --> 00:02:45,070 Now we're not done quite yet. 41 00:02:45,300 --> 00:02:51,360 Remember any time that we show an input element with react in any capacity be it with react or redux 42 00:02:51,360 --> 00:02:56,550 a redux form we always are supposed to make sure that we show that input element in assign its value 43 00:02:56,550 --> 00:03:00,450 property and also give it in on change callback handler. 44 00:03:00,450 --> 00:03:02,340 So right now we are not doing any of those things. 45 00:03:02,340 --> 00:03:07,910 We are just showing a plane input element and this is not a controlled element as we would prefer it 46 00:03:07,910 --> 00:03:09,340 to be. 47 00:03:09,350 --> 00:03:15,650 So in order to turn this into a controlled element any time that the field tag right here calls render 48 00:03:15,650 --> 00:03:19,890 input it's going to pass in some number of arguments right here. 49 00:03:19,970 --> 00:03:25,610 So I'm going to receive this as a single argument called form props and let's just cancel that out right 50 00:03:25,610 --> 00:03:27,570 now and see what we are dealing with. 51 00:03:28,790 --> 00:03:34,820 It's going to flip back over and we could see that we got to cancel logs right here we get to count 52 00:03:34,850 --> 00:03:40,970 locks because we are showing two separate inputs and that is causing render input to be called two times 53 00:03:42,880 --> 00:03:44,000 so I'm going to expand. 54 00:03:44,010 --> 00:03:47,040 But the first one right here inside this object. 55 00:03:47,050 --> 00:03:52,990 You'll notice that we have keys of inputs and meida the input property right here has our actual field 56 00:03:53,050 --> 00:03:54,660 name of title. 57 00:03:54,850 --> 00:04:01,050 So this object right here is meant to essentially be customizing this first input the second consulate. 58 00:04:01,150 --> 00:04:03,660 The second input right here is a name of description. 59 00:04:03,670 --> 00:04:06,520 So this right here is meant to somehow customize the second input. 60 00:04:06,520 --> 00:04:11,650 Over here you'll notice that inside of this input element to this input property we have a bunch of 61 00:04:11,650 --> 00:04:14,110 very familiar looking callback handlers. 62 00:04:14,110 --> 00:04:19,090 So for example if your is on change and we all set the value prop right there as well. 63 00:04:19,180 --> 00:04:20,200 So the intent here. 64 00:04:20,200 --> 00:04:25,720 Again can't say it enough is that redux form is going to wire up all the stuff for us it is our job 65 00:04:25,840 --> 00:04:27,820 to make this very last connection. 66 00:04:27,820 --> 00:04:33,400 It is our job to take that onchange handler and wire it up to the input element and it is our job to 67 00:04:33,400 --> 00:04:36,750 take the value prop and hook it up to the input element as well. 68 00:04:37,000 --> 00:04:44,320 So essentially you and I are supposed to take this form props take the input property out of it and 69 00:04:44,380 --> 00:04:46,990 hook up the relevant properties to the text input. 70 00:04:47,230 --> 00:04:56,750 So we can say something like say on change we want to call form prop's input on change and then for 71 00:04:56,750 --> 00:05:05,210 the value we would pass in a forum prop's input value like so now when I say this it's going to turn 72 00:05:05,210 --> 00:05:09,470 it into a multi-line expression like so totally equivalent to what you just saw on the screen a moment 73 00:05:09,470 --> 00:05:09,990 ago. 74 00:05:11,310 --> 00:05:11,540 OK. 75 00:05:11,550 --> 00:05:14,760 So let's now flip back over to our application and now see what's happening. 76 00:05:15,130 --> 00:05:20,160 When I flip back over everything looks the same but now really interestingly if you type something in 77 00:05:20,160 --> 00:05:25,890 here you can then open up your redux dev tools and you're going to start to see some really interesting 78 00:05:25,920 --> 00:05:26,930 input over there. 79 00:05:29,650 --> 00:05:34,180 OK so I'm going to expand my tools here and they'll notice that when we typed in characters we got a 80 00:05:34,180 --> 00:05:39,370 ton of these different change action types dispatched to our redux store. 81 00:05:39,460 --> 00:05:43,320 So every one of these different change actions that you see is a different key press. 82 00:05:43,330 --> 00:05:48,880 When I typed into that text input in addition if you select the state selector over here on the top 83 00:05:49,150 --> 00:05:54,880 right hand side and then select the tree selector right here you can see that the form piece of state 84 00:05:54,880 --> 00:06:00,850 right here now has some additional property inside of it before it just had one empty object. 85 00:06:00,850 --> 00:06:06,610 I can now open up this object I'll see that it has a key of string create that string create key right 86 00:06:06,610 --> 00:06:13,630 there is coming from the name of the form that we put down here and then if we open up that object we'll 87 00:06:13,630 --> 00:06:19,020 see that it has a Values property and has the title and the description out of our form. 88 00:06:19,060 --> 00:06:24,250 So this is how redux form it stores data inside of your reducer that you wired up to the combined reducers 89 00:06:24,250 --> 00:06:29,300 call every time that you create a new form read this read Form call right here. 90 00:06:29,320 --> 00:06:34,570 You pass in that name whatever name you put inside there read redux form is going to start to store 91 00:06:34,570 --> 00:06:40,090 all the values for that form on a key with that name inside of the form reducer and then nested somewhere 92 00:06:40,090 --> 00:06:43,330 inside there is going to be all the different values out of your form. 93 00:06:43,360 --> 00:06:47,600 So this is just normal redux nothing different than you have learned already. 94 00:06:47,620 --> 00:06:51,130 This is just redux form storing all this information for you automatically. 95 00:06:51,130 --> 00:06:53,450 That is it all right. 96 00:06:53,450 --> 00:06:57,550 It's not going to condense that down on the right hand side. 97 00:06:57,680 --> 00:07:02,580 So clearly redux form is now kind of handling text input for both these two inputs right here. 98 00:07:03,480 --> 00:07:08,840 And we just did that by forcibly taking all the props or two props I should say out of the form prop's 99 00:07:08,840 --> 00:07:14,930 argument right here and passing them into the input arguments for the onchange and value properties. 100 00:07:15,030 --> 00:07:18,230 When he starts to look at the documentation there is actually going to be a little shortened way of 101 00:07:18,230 --> 00:07:18,940 doing this. 102 00:07:18,950 --> 00:07:23,840 So we do not actually have to specify like oh yeah take the onchange prop and assign it to on change 103 00:07:24,080 --> 00:07:26,850 and take the value prop and assign it to value instead. 104 00:07:26,870 --> 00:07:30,840 We can use a little shortened syntax to do this to do so. 105 00:07:30,860 --> 00:07:35,720 I'm going to remove both those props and I'm going to turn this back into a single line. 106 00:07:35,720 --> 00:07:39,730 GSX expression like so. 107 00:07:39,910 --> 00:07:40,800 It's now inside of. 108 00:07:40,840 --> 00:07:44,900 Going to see a little bit of new syntax that we've never seen around GSX before. 109 00:07:44,920 --> 00:07:50,180 I'm going to put down a set of curly braces without any equals like so in front of it. 110 00:07:50,190 --> 00:07:57,880 So just a set of curly braces and then inside if you're going to say Dot dot dot form prop's dot input 111 00:07:57,940 --> 00:07:58,940 like so. 112 00:07:59,410 --> 00:08:01,990 So again this is a new little bit of syntax. 113 00:08:02,110 --> 00:08:05,680 This essentially is going to take the form prop's input property. 114 00:08:05,800 --> 00:08:11,080 So that was an object with the value prop where the value property and the on change handler in all 115 00:08:11,080 --> 00:08:17,530 that stuff that's going to take all those key value pairs and add them as properties to the input element. 116 00:08:17,530 --> 00:08:22,630 So essentially take that entire input object take all the properties out there and add them as props 117 00:08:22,780 --> 00:08:24,530 to the input element. 118 00:08:25,910 --> 00:08:29,930 So if we now say this again we can flip back over. 119 00:08:30,050 --> 00:08:34,940 I can enter in some text here and again we're going to see the same thing that we saw before. 120 00:08:34,940 --> 00:08:39,800 We now see it we have the form with string create and it has values on it of whatever we just entered 121 00:08:39,800 --> 00:08:40,820 in there. 122 00:08:40,820 --> 00:08:45,320 Now we also see some other properties inside there now that we are correctly passing and all the props. 123 00:08:45,350 --> 00:08:50,210 So any time that we make use of redux form we are always going to use this syntax because there are 124 00:08:50,210 --> 00:08:56,180 some other properties inside that input object besides just the value one and the onchange one that 125 00:08:56,180 --> 00:08:58,090 redux form cares about. 126 00:08:58,160 --> 00:09:04,790 Now as a way of shortening up the syntax even further we can actually structure the input argument out 127 00:09:04,790 --> 00:09:06,930 of the form prop's object. 128 00:09:07,010 --> 00:09:09,260 So I'm going to structure out input. 129 00:09:09,470 --> 00:09:15,870 And now we can reduce this down to just be dot dot dot input like so. 130 00:09:15,900 --> 00:09:18,070 OK so I'm going to save this right here. 131 00:09:18,120 --> 00:09:19,410 We're going to take another quick break. 132 00:09:19,410 --> 00:09:22,360 We'll come back the next video and we're going to continue working on our form.