1 00:00:00,770 --> 00:00:04,500 In this video we're going to start working on our create stream form right here. 2 00:00:04,550 --> 00:00:07,370 So the idea is that we're going to enter in some title for a stream. 3 00:00:07,370 --> 00:00:12,200 Any description when we submit it we're going to want to reach out to some API server that we have not 4 00:00:12,200 --> 00:00:17,150 yet put together but we will very shortly and create a new record that says that a given user has created 5 00:00:17,180 --> 00:00:18,190 a stream. 6 00:00:18,230 --> 00:00:25,640 Now in order to put this in we're going to be using a library called redux form redux form is kind of 7 00:00:25,640 --> 00:00:27,060 notorious I guess. 8 00:00:27,140 --> 00:00:31,400 On one hand some people think it's kind of challenging to understand but on the other hand it does a 9 00:00:31,400 --> 00:00:35,750 ton of stuff for you automatically and it makes life pretty darn easy compared to if you try to put 10 00:00:35,750 --> 00:00:40,180 all these different forms together by hand and integrate all that stuff with redux. 11 00:00:40,190 --> 00:00:43,700 So it's kind of a mixed bag depending on your attitude I suppose. 12 00:00:43,700 --> 00:00:47,200 At any rate we're going to figure out exactly how it works. 13 00:00:47,270 --> 00:00:50,720 Now we're going to first begin by installing a redux form into our project. 14 00:00:50,810 --> 00:00:52,800 So I'm going to change on over to my terminal. 15 00:00:52,940 --> 00:01:00,380 I'm going to start my server and I'll do an NPM install dash dash save redux dash form like so and then 16 00:01:00,470 --> 00:01:03,320 I'll just go ahead and let that do its thing while it's going on. 17 00:01:03,320 --> 00:01:05,830 We're going to take a look at a quick diagram or two. 18 00:01:06,260 --> 00:01:06,530 All right. 19 00:01:06,530 --> 00:01:10,490 So I want you to first think about how we've been handling forms throughout this entire course up to 20 00:01:10,490 --> 00:01:12,340 this point in time at this point. 21 00:01:12,380 --> 00:01:17,270 We have always been making use of class based components these class based components have been making 22 00:01:17,270 --> 00:01:19,610 use of component level state. 23 00:01:19,700 --> 00:01:25,810 So we had some states object that recorded the current value of an input element. 24 00:01:25,830 --> 00:01:30,450 We then took that value out of that state object on the component and we essentially pushed it into 25 00:01:30,450 --> 00:01:32,550 that input element inside the dam. 26 00:01:32,550 --> 00:01:37,770 Remember the idea here is was that we wanted to tell the input element what its value was and that we 27 00:01:37,770 --> 00:01:42,270 did not want to store any of our state or our D data inside the dome itself. 28 00:01:43,060 --> 00:01:47,600 Then whenever a user changed that text we would have an on change callback. 29 00:01:47,770 --> 00:01:53,020 The onchange callback would essentially call our set state method and update our component level state. 30 00:01:53,020 --> 00:01:56,580 So we had this little cycle here that just went on over and over and over again. 31 00:01:56,740 --> 00:02:02,050 And the real pinnacle are the cornerstone of it was that our class based component held the real truth 32 00:02:02,110 --> 00:02:07,860 of data inside of our application that state object knew what the true value of that text input was. 33 00:02:08,290 --> 00:02:13,760 So once we start making use of redux this little approach right here is going to change ever so slightly. 34 00:02:13,840 --> 00:02:19,750 Remember that in general with redux we want to hold all of our data inside the redux store. 35 00:02:19,750 --> 00:02:25,270 And so no longer are we going to have class based components that have a ton of state on them that are 36 00:02:25,270 --> 00:02:27,500 going to manage these different input elements. 37 00:02:27,540 --> 00:02:30,520 Instead we're going to store that data inside of our redux store. 38 00:02:30,610 --> 00:02:35,950 And any time a user changes a element we're going to probably call an action creator that's going to 39 00:02:35,950 --> 00:02:38,890 attempt to change that data inside of a redux store. 40 00:02:38,890 --> 00:02:43,450 Now let me show you a quick diagram that can help you understand how a redux form is going to automate 41 00:02:43,450 --> 00:02:47,300 some portions of that flow OK here we go. 42 00:02:47,960 --> 00:02:53,420 So just as before we might have some input element over here on the far right hand side this input element 43 00:02:53,450 --> 00:02:55,250 is going to be assigned a value. 44 00:02:55,250 --> 00:03:01,430 And in onchange handler by our application because we never let the DOM hold information about our app. 45 00:03:01,470 --> 00:03:06,450 Instead our app holds information and then we essentially push it into the DOM. 46 00:03:06,480 --> 00:03:11,590 Now everything on the left hand side is essentially going to be a little bit different. 47 00:03:11,640 --> 00:03:17,700 So we're going to have some redo cert that's going to hold all the states of our different forms inside 48 00:03:17,700 --> 00:03:18,720 of our application. 49 00:03:18,870 --> 00:03:25,350 So that might be the value of some input element or the selection of some dropdown or the current checkboxes 50 00:03:25,350 --> 00:03:26,990 that are checked inside of application. 51 00:03:27,150 --> 00:03:32,400 Essentially all of our foreign data is going to exist inside of our redux store and all that form data 52 00:03:32,400 --> 00:03:34,600 is going to be maintained by a reducer. 53 00:03:35,720 --> 00:03:41,120 Then in order to make sure that we can get the data from that store into our input elements of whatever 54 00:03:41,120 --> 00:03:45,650 type they are we're going to essentially have something like Map state to prop's that's going to take 55 00:03:45,650 --> 00:03:50,560 that foreign data out of the redux store and get it into our component as props. 56 00:03:50,720 --> 00:03:54,530 And then we're going to make sure that you and I take that prop object and all the different values 57 00:03:54,530 --> 00:04:00,080 inside there and pass them into our different input elements as values just as we did before when we 58 00:04:00,080 --> 00:04:05,650 were making use of component level state then any time a user makes a change to an element we're going 59 00:04:05,650 --> 00:04:10,870 to have some callback handler inside of our component that's going to probably an action creator and 60 00:04:10,870 --> 00:04:14,530 try to update the form data inside of a redux store. 61 00:04:14,560 --> 00:04:19,960 And here's the great thing about this entire scenario redux form is essentially going to do all of that 62 00:04:19,960 --> 00:04:23,820 stuff for us because it is so incredibly repetitive. 63 00:04:24,210 --> 00:04:28,570 I bet you can kind of tell at this point in time that every single time that we want to change data 64 00:04:28,600 --> 00:04:31,940 inside of a redux store what do we do we call an action creator. 65 00:04:32,080 --> 00:04:36,550 And any time that you want to get data out of a redux store into a component What do we do. 66 00:04:36,570 --> 00:04:39,010 When we write a map state to prop's function. 67 00:04:39,040 --> 00:04:42,320 So those are two pretty repetitive operations. 68 00:04:42,520 --> 00:04:48,220 And so we can essentially just abstract all that work away from us and have redux form do it for us 69 00:04:48,250 --> 00:04:49,200 automatically. 70 00:04:49,510 --> 00:04:55,080 So essentially redux form is going to have a producer that we are going to wire up to our application. 71 00:04:55,150 --> 00:04:59,980 You and I are not going to write this reducer this is included with the redux form library. 72 00:04:59,980 --> 00:05:04,340 We're going to take that reducer and wired up to our store. 73 00:05:04,390 --> 00:05:08,920 We are not going to write any outstate to prop's function redux form is going to essentially do that 74 00:05:08,920 --> 00:05:10,350 for us automatically. 75 00:05:10,630 --> 00:05:15,760 You and I are not going to write any actual creators redux form is going to do that for us automatically. 76 00:05:15,760 --> 00:05:21,280 The only thing that you and I really have to do is make sure that we eventually get some form information 77 00:05:21,370 --> 00:05:26,230 down into some given input element and make sure that that input element understands that it needs to 78 00:05:26,230 --> 00:05:27,890 call some callback handler. 79 00:05:27,910 --> 00:05:31,470 Provided I can buy redux form anytime that it gets changed. 80 00:05:31,750 --> 00:05:34,030 So this is essentially what is going on behind the scenes. 81 00:05:34,030 --> 00:05:40,450 It is still making use of the entire redux system as you understand it but it's done all for us automatically. 82 00:05:40,470 --> 00:05:41,120 All right. 83 00:05:41,170 --> 00:05:44,890 So let's flip back over toward terminal. 84 00:05:44,890 --> 00:05:46,540 It looks like the installation is complete. 85 00:05:46,540 --> 00:05:51,100 I'm going to start my application back up with NPM start and we're going to take a quick pause right 86 00:05:51,100 --> 00:05:52,920 now when we come back the next video. 87 00:05:52,930 --> 00:05:58,870 I want show you the redux foreign documentation very quickly because it is absolutely outstanding documentation 88 00:05:59,170 --> 00:06:02,920 and I really suspect that you're going to want to reference it at some point in the future for your 89 00:06:02,920 --> 00:06:04,100 own purposes. 90 00:06:04,150 --> 00:06:08,440 And then after that we're going to start to wire up relax form to our application so quick pause and 91 00:06:08,440 --> 00:06:09,610 I'll see you in just a minute.