1 00:00:00,680 --> 00:00:05,210 In the last section we installed redux form inside of our application and we did a little bit of setup 2 00:00:05,220 --> 00:00:05,850 for it. 3 00:00:06,090 --> 00:00:10,830 Let's now talk a little bit more about what redux form is going to do for us and exactly why we are 4 00:00:10,830 --> 00:00:12,220 using it at all. 5 00:00:12,250 --> 00:00:16,400 Like why are we just handling his inputs manually as we did in the past. 6 00:00:16,620 --> 00:00:18,510 So I'm going to flip on over to a diagram. 7 00:00:18,540 --> 00:00:20,600 Let's look at what it's going to do for us. 8 00:00:20,610 --> 00:00:26,100 So this is a little bit of a guideline on how to use redux form as we talk about how we're going to 9 00:00:26,100 --> 00:00:26,550 use it. 10 00:00:26,550 --> 00:00:31,020 I think that the purpose of redux form is going to become a little bit more clear. 11 00:00:31,110 --> 00:00:36,420 The first thing we're going to do is to identify the different pieces of state that exist inside of 12 00:00:36,420 --> 00:00:37,670 our form. 13 00:00:37,670 --> 00:00:42,390 Some for the form that we are working with we have identified that we have three different pieces of 14 00:00:42,390 --> 00:00:50,400 state a title some categories and some contents for the actual post for each different piece of state 15 00:00:50,400 --> 00:00:51,140 that we have. 16 00:00:51,150 --> 00:00:57,360 We're going to create something called a field component a field component is created by redux form 17 00:00:57,360 --> 00:01:03,430 for us all we have to do is tell the field what type of input we want to receive from the user. 18 00:01:03,450 --> 00:01:09,390 So it might be like a radio button or a checkbox or some text input or something like that or even a 19 00:01:09,390 --> 00:01:16,610 file input if we want it then at some point in time a user is going to change that field input. 20 00:01:16,650 --> 00:01:23,070 So they might check the checkbox change the radio box enter some text or out of file attachment or something 21 00:01:23,070 --> 00:01:29,850 like that internally redux form is going to automatically handle all these changes for us. 22 00:01:29,850 --> 00:01:35,010 So we've already seen what happens whenever we want to handle inputs inside of reactor right. 23 00:01:35,010 --> 00:01:37,860 We said that we'd put on the onchange handler. 24 00:01:37,980 --> 00:01:42,380 We set our state and then we set the value on the input ourself. 25 00:01:42,420 --> 00:01:46,770 That's a whole bunch of boilerplate that really gets tedious to write very quickly. 26 00:01:46,770 --> 00:01:52,900 And so this right here is what redux form is really doing for us that's saving us a lot of trouble. 27 00:01:53,040 --> 00:01:59,210 Redux form is going to automatically handle any changes that are made to any input of any type inside 28 00:01:59,250 --> 00:02:00,420 of our application. 29 00:02:00,510 --> 00:02:03,090 So we don't have to put together a set state call. 30 00:02:03,090 --> 00:02:04,650 We don't have to make an action creator. 31 00:02:04,650 --> 00:02:06,570 We don't have to set the value of the input. 32 00:02:06,810 --> 00:02:11,880 All those different pieces of boilerplate that get really tedious to write over and over again are going 33 00:02:11,880 --> 00:02:19,250 to be handled automatically for us by redux form finally once a user sets all the different inputs and 34 00:02:19,250 --> 00:02:20,290 says OK this looks good. 35 00:02:20,290 --> 00:02:21,580 I want to submit the form. 36 00:02:21,740 --> 00:02:23,590 They're going to attempt to submit the form. 37 00:02:23,750 --> 00:02:29,030 And at that point in time we're going to pass two callbacks to redux form that validate the different 38 00:02:29,060 --> 00:02:30,870 inputs that the users provided. 39 00:02:30,890 --> 00:02:37,040 And then also if the form is valid you know if the user has actually submitted valid input then we will 40 00:02:37,040 --> 00:02:39,190 also handle foreign some middle. 41 00:02:39,200 --> 00:02:44,960 So the last stage right here handling forms the middle that's really one redux form hands control of 42 00:02:44,960 --> 00:02:49,740 the form back to us and says Okay it looks like the user is attempting to submit the form. 43 00:02:49,790 --> 00:02:51,310 It looks like all the input is valid. 44 00:02:51,310 --> 00:02:56,630 So go ahead take this data and save it to your back and server or whatever you really want to do with 45 00:02:56,630 --> 00:02:57,170 it. 46 00:02:57,170 --> 00:03:01,240 So that's when relex form really hands control back over to us. 47 00:03:01,790 --> 00:03:02,150 OK. 48 00:03:02,150 --> 00:03:05,150 So let's start working through our implementation here. 49 00:03:05,150 --> 00:03:09,610 Remember the first thing we're going to do is identify the different pieces of form state. 50 00:03:09,670 --> 00:03:11,460 We've more or less already done that. 51 00:03:11,600 --> 00:03:16,580 So we're going to move on to making one field component per piece of state. 52 00:03:16,610 --> 00:03:18,500 So this right here might seem a little bit confusing. 53 00:03:18,500 --> 00:03:26,900 So let's get to it and then flip back over to our posts new component here and is right here and at 54 00:03:26,900 --> 00:03:31,790 the top we're going to import two helpers from the redux foreign library. 55 00:03:31,820 --> 00:03:43,170 We're going to import field and redux form from redux form so we've spoken very briefly about the field 56 00:03:43,170 --> 00:03:48,030 component right here it is a reactive component and it's something that's wired up automatically to 57 00:03:48,030 --> 00:03:49,910 redux form. 58 00:03:49,980 --> 00:03:53,930 The other piece that we imported from redux form is a function. 59 00:03:53,970 --> 00:03:57,290 This is a function right here called redux form. 60 00:03:57,360 --> 00:04:03,540 You can essentially think of this Funk's right here as being identical or at least very similar I should 61 00:04:03,540 --> 00:04:08,430 say to the Kinect helper that we've been using from re-act redux. 62 00:04:08,430 --> 00:04:14,130 So remember that just a moment ago inside of our reducers index start G-S file we hooked up that former 63 00:04:14,130 --> 00:04:14,830 douceur. 64 00:04:14,880 --> 00:04:21,810 So clearly redux form is being integrated somehow into the redux side of our application this redux 65 00:04:21,810 --> 00:04:27,690 form helper right here is what allows our component to communicate with that additional reducer that 66 00:04:27,690 --> 00:04:29,010 we just wired in. 67 00:04:29,010 --> 00:04:33,410 So again we can really think of this thing as being very similar to the connect helper. 68 00:04:33,410 --> 00:04:37,780 It is what is allowing our component to talk directly to the redux store. 69 00:04:39,270 --> 00:04:45,380 Lets wire up our redux form help right here in exactly the same fashion as we would use our connect 70 00:04:45,380 --> 00:04:46,080 helper. 71 00:04:46,190 --> 00:04:51,310 So we're going to use that read ex-Foreign help right here and attach it somehow to the post-New component 72 00:04:51,380 --> 00:04:59,420 at the bottom we'll call redux form to put our first set of parentheses and then a second set of parentheses 73 00:04:59,480 --> 00:05:01,700 around the component itself. 74 00:05:01,700 --> 00:05:07,520 Now there's just a little bit of configuration we have to pass into this redux form function right here. 75 00:05:07,520 --> 00:05:12,590 Remember that whenever we use the connect helper we defined the map state to props and the map dispatched 76 00:05:12,590 --> 00:05:14,100 to prop's functions. 77 00:05:14,210 --> 00:05:21,110 In the case of redux form however we pass a single argument which is a function and this function can 78 00:05:21,140 --> 00:05:25,240 take some number of different configuration options for it. 79 00:05:25,260 --> 00:05:31,520 Now the only configure configuration option we're going to specify is the form option. 80 00:05:31,520 --> 00:05:35,450 So let's fill out the value right here and I'll tell you about a little bit about what this thing is 81 00:05:35,450 --> 00:05:36,160 used for. 82 00:05:36,290 --> 00:05:40,880 So I'm going to put in here posts new form like so. 83 00:05:41,590 --> 00:05:41,910 OK. 84 00:05:41,930 --> 00:05:46,640 So this right here this form property that we've just designated You can really think of as being the 85 00:05:46,730 --> 00:05:49,400 name of the form. 86 00:05:49,430 --> 00:05:55,610 So inside of any given react or a redux application you can easily imagine cases where you might want 87 00:05:55,610 --> 00:05:59,490 to show multiple different forms on a page at a single time. 88 00:05:59,510 --> 00:05:59,920 Right. 89 00:05:59,940 --> 00:06:04,090 Like of course we might want to show user multiple forms on a single page. 90 00:06:04,340 --> 00:06:09,880 For example maybe whenever a user wants to sign into our application we want to show them both a sign 91 00:06:09,880 --> 00:06:15,260 in and a sign up form at the same time to handle the case in which they've already signed up to a click 92 00:06:15,350 --> 00:06:19,140 application or the case in which they need to sign up. 93 00:06:19,280 --> 00:06:25,430 So easy to imagine the case in which we have multiple forms visible on the screen at any given time. 94 00:06:25,460 --> 00:06:32,600 That is exactly what this form property right here is helping us with by providing a unique string right 95 00:06:32,600 --> 00:06:32,930 here. 96 00:06:32,960 --> 00:06:36,690 And there's absolutely no requirement for formatting in the string whatsoever. 97 00:06:36,710 --> 00:06:38,000 Just has to be unique. 98 00:06:38,000 --> 00:06:39,710 That's the only requirement. 99 00:06:39,710 --> 00:06:45,110 We ensure that if we are showing multiple different forms on the screen at a different time or I should 100 00:06:45,110 --> 00:06:49,650 say at the same time redux form will handle all those different forms correctly. 101 00:06:49,670 --> 00:06:57,190 So I won't try to merge state from multiple different forms into a single piece of state essentially. 102 00:06:57,650 --> 00:07:03,760 I can tell you that if we had some other component inside of our applications let's say light posts 103 00:07:03,830 --> 00:07:04,680 at it. 104 00:07:04,810 --> 00:07:12,080 Us if We have an export default statement and there as well and we said that that forms name was also 105 00:07:12,080 --> 00:07:18,590 post-New form that would cause all the form state that exist inside of this other component to be merged 106 00:07:18,680 --> 00:07:20,450 into this one over here. 107 00:07:20,450 --> 00:07:26,180 So this is a lot of very in-depth discussion but all I'm really trying to communicate here is to say 108 00:07:26,360 --> 00:07:30,620 make sure that the string that you assign to this form property is unique. 109 00:07:30,650 --> 00:07:37,320 That's all that's all it really has to be again there is absolutely no requirement or formatting of 110 00:07:37,320 --> 00:07:37,860 the string. 111 00:07:37,860 --> 00:07:41,990 So I could have just as easily done one two three four five six whatever I want to be. 112 00:07:42,090 --> 00:07:45,750 It just has to be something unique OK. 113 00:07:45,890 --> 00:07:52,100 So there is our helper that's going to allow redux form to communicate directly from the component to 114 00:07:52,100 --> 00:07:54,800 the reducers that we've already set up. 115 00:07:54,800 --> 00:08:00,170 Now the next thing I want to work on is setting up the actual form inside of our component and wiring 116 00:08:00,170 --> 00:08:01,800 up our first field. 117 00:08:01,880 --> 00:08:03,420 So let's get this thing a shot. 118 00:08:04,240 --> 00:08:06,660 As you might imagine it is called redux form. 119 00:08:06,670 --> 00:08:09,540 It is all about handling form elements. 120 00:08:09,580 --> 00:08:17,550 So we still are going to be working with a page T.M. form element then inside of here will specify our 121 00:08:17,550 --> 00:08:20,980 first field so field is a component. 122 00:08:21,190 --> 00:08:28,050 We're going to pass it some number of different props the first proper going to specify is the name 123 00:08:28,580 --> 00:08:29,260 crop. 124 00:08:29,310 --> 00:08:36,420 We're going to give it a name of title the name right here is essentially what piece of state are we 125 00:08:36,420 --> 00:08:40,000 trying to describe here what piece of state is the user editing. 126 00:08:40,050 --> 00:08:45,300 In this case our first field is meant to reflect the title of a post. 127 00:08:45,330 --> 00:08:48,000 And so I think that an appropriate name would be title 128 00:08:50,770 --> 00:08:55,360 The second property is going to be something called component. 129 00:08:55,410 --> 00:09:02,210 So are you going to specify component right for the component property takes in a function. 130 00:09:02,260 --> 00:09:08,200 So a function or another component that will be used to display this field component right here. 131 00:09:08,530 --> 00:09:11,380 So this is where things start to get a little bit confusing. 132 00:09:11,410 --> 00:09:15,200 So I think that is probably going to be best strategy to take a break right now. 133 00:09:15,220 --> 00:09:17,430 We'll kind of collect our breath collect our thoughts. 134 00:09:17,440 --> 00:09:21,790 We're going to come back and talk a little bit more about exactly what this component property is doing 135 00:09:21,790 --> 00:09:22,930 for us. 136 00:09:22,960 --> 00:09:26,600 So let's take a quick break and I'll talk to you in just a second.