1 00:00:00,560 --> 00:00:04,880 In the last section we had a quick discussion about redux form and why we are using it inside of our 2 00:00:04,880 --> 00:00:08,660 project now that we've got a better idea of what redux form is doing. 3 00:00:08,840 --> 00:00:13,880 Let's make sure that we install it as an NPM module so that we can wire it up to our application. 4 00:00:13,940 --> 00:00:16,150 So I think that you're familiar with what we do from here. 5 00:00:16,250 --> 00:00:18,320 We're going to change on over to our terminal. 6 00:00:18,320 --> 00:00:21,320 We're going to kill the running server. 7 00:00:21,320 --> 00:00:26,270 We're going to make sure that we change into the client directory because this is a module that we want 8 00:00:26,270 --> 00:00:33,320 to install for the client side of our application and we'll do an install dash dash save redux dash 9 00:00:33,360 --> 00:00:35,170 form. 10 00:00:35,260 --> 00:00:38,280 Now while that's running let's flip back over to our web browser. 11 00:00:38,470 --> 00:00:47,650 I'm going to make in a new tab over here and I'm going to navigate to redux Dasch form dot com. 12 00:00:47,650 --> 00:00:52,630 So I don't usually go super far in the documentation for a lot of the frameworks and libraries that 13 00:00:52,630 --> 00:00:54,230 I talk about. 14 00:00:54,850 --> 00:01:01,690 Redux farm is one of the big exceptions to that redux from the documentation is probably among the best 15 00:01:01,690 --> 00:01:06,400 documentation for any library of any language that I've ever seen before. 16 00:01:06,430 --> 00:01:12,280 It really just has very concise very clear documentation and most importantly it has very plain and 17 00:01:12,280 --> 00:01:14,530 simple examples on how to use it. 18 00:01:14,590 --> 00:01:20,710 So it's not just documentation on the different methods and functions that redux form has but it's also 19 00:01:20,710 --> 00:01:24,770 examples of how to approach and tackle very common problems. 20 00:01:25,060 --> 00:01:29,950 So if you scroll down a bit and you can find the examples section on here that's what we want to look 21 00:01:29,950 --> 00:01:31,520 at right now. 22 00:01:32,530 --> 00:01:34,370 So I'm showing you this example section. 23 00:01:34,450 --> 00:01:38,290 So here is our list of examples and you can scroll through all the different ones right here you can 24 00:01:38,290 --> 00:01:42,450 also see them on the left hand pane right here as well if you scroll down to examples. 25 00:01:42,670 --> 00:01:48,880 So each of these has some sample code on some very common use cases of forms. 26 00:01:48,880 --> 00:01:55,060 So for example you can look at how to put together a simple form with redux form that's it just a simple 27 00:01:55,060 --> 00:01:58,090 form and it gives you a little discussion on what's going on here. 28 00:01:58,330 --> 00:02:04,840 And then an example of the form itself and then the actual code that was used to create that form. 29 00:02:04,870 --> 00:02:09,700 You can also go to way more complex forms like the type of form we're going to be creating is essentially 30 00:02:09,700 --> 00:02:11,080 a wizard form. 31 00:02:11,080 --> 00:02:12,850 So we can look at Wizard form down here 32 00:02:15,600 --> 00:02:18,980 and it will give you an example of exactly how this thing works. 33 00:02:19,060 --> 00:02:21,400 And then an example of the wizard form itself. 34 00:02:21,430 --> 00:02:25,350 So again a wizard form is something where you have like multiple pages in a single form. 35 00:02:25,480 --> 00:02:29,950 So we enter in some input we click Next click next. 36 00:02:29,950 --> 00:02:35,260 OK so maybe it's not working here but hey we'll cut them the benefit of the doubt we'll just say that's 37 00:02:35,530 --> 00:02:36,760 OK we'll just write that one off. 38 00:02:36,760 --> 00:02:37,760 Don't sweat it. 39 00:02:38,070 --> 00:02:41,260 Any ways you can still see the example in here of exactly what's going on. 40 00:02:41,260 --> 00:02:44,380 So just across the board documentation is fantastic. 41 00:02:44,440 --> 00:02:49,240 If we talk about redux form and you feel like something is still missing I encourage you to come back 42 00:02:49,240 --> 00:02:53,830 to redux form itself the documentation and read through some of the examples. 43 00:02:53,830 --> 00:02:58,280 Read through some of the frequently asked questions which again is also a fantastic resource. 44 00:02:58,300 --> 00:03:02,350 So really just great overall I can't recommend it enough. 45 00:03:02,380 --> 00:03:07,720 Now the last thing I want to look at on here is if we can find the getting started guide here at the 46 00:03:07,720 --> 00:03:08,770 top of the list. 47 00:03:08,950 --> 00:03:11,840 And so we're going to go through this getting started guide right now. 48 00:03:11,970 --> 00:03:14,850 We're going to talk about all this stuff and we'll talk about what it does. 49 00:03:14,950 --> 00:03:19,600 But I just want to point this out that you know if we go to the set up and you're still confused about 50 00:03:19,600 --> 00:03:23,510 what's going on feel free to walk through this basic guide right here. 51 00:03:23,560 --> 00:03:28,390 It'll tell you a little bit about exactly how to set redux form up and how to use it inside of your 52 00:03:28,390 --> 00:03:29,190 application. 53 00:03:29,350 --> 00:03:34,390 So again I just want you to be aware that you can always you know hop over here and take a glance. 54 00:03:34,390 --> 00:03:34,630 All right. 55 00:03:34,630 --> 00:03:38,410 So anyways back to the task at hand changing back over to the terminal. 56 00:03:38,410 --> 00:03:43,540 It looks like my redux form module has completed installing So I'm going it changed back up to my server 57 00:03:43,540 --> 00:03:48,700 directory and then start my server with Antium run death. 58 00:03:48,700 --> 00:03:49,490 OK. 59 00:03:49,900 --> 00:03:51,950 So we'll flip back over to our application. 60 00:03:52,060 --> 00:03:55,000 We now have access to redux form inside of here. 61 00:03:55,030 --> 00:03:58,710 So the first thing you have to do is wire it up to our application. 62 00:03:59,050 --> 00:04:04,120 Remember we spoke just a second ago if you did go through that lecture and if you did watch it we had 63 00:04:04,120 --> 00:04:10,870 said that redux form brings along its own form reducer that we have to hook up to our store and that's 64 00:04:10,870 --> 00:04:15,440 how relaxed form gets like a handle of sorts on our application. 65 00:04:15,670 --> 00:04:18,420 It gets how it gets a handle on our redux store. 66 00:04:18,550 --> 00:04:20,500 And so it's going to be the first piece of set up we do. 67 00:04:20,530 --> 00:04:29,870 We're going to set this former douceur so I'm going to change on over to my reducers index file. 68 00:04:30,100 --> 00:04:34,930 Remember that this is where we wired together all the different reducers inside of our application. 69 00:04:35,140 --> 00:04:40,750 Not only reducers that you and I right but also reducers that are used by third party modules that we 70 00:04:40,750 --> 00:04:42,660 want to install as well. 71 00:04:43,420 --> 00:04:49,060 So at the top of this file We're going to import this reducer that is created for us automatically by 72 00:04:49,060 --> 00:04:50,470 redux form. 73 00:04:50,560 --> 00:05:00,040 So we'll say import reducer from redux dush form like so now we import this as reducers because that 74 00:05:00,040 --> 00:05:05,120 is the name of the function as it is exported from the library redux form. 75 00:05:05,380 --> 00:05:05,870 You and I. 76 00:05:05,880 --> 00:05:08,070 We cannot change this variable right here. 77 00:05:08,470 --> 00:05:14,260 And I'm mentioning this because if you look at it the name reducer inside of like a reducers file is 78 00:05:14,260 --> 00:05:15,820 kind of ambiguous. 79 00:05:15,850 --> 00:05:16,420 Right. 80 00:05:16,510 --> 00:05:21,130 Like if we have a lot of different reducers in here and then at some point in time we just see like 81 00:05:21,430 --> 00:05:22,590 you know the word reducer. 82 00:05:22,720 --> 00:05:27,050 I don't know about you but I would look at this and say well what reducing does this belong to. 83 00:05:27,070 --> 00:05:28,720 Like this one's called Author reducer. 84 00:05:28,720 --> 00:05:30,110 I know what this does. 85 00:05:30,190 --> 00:05:32,160 You know I know where I can look this thing up. 86 00:05:32,380 --> 00:05:36,090 But this one is just called reducer like not very descriptive. 87 00:05:36,090 --> 00:05:43,170 So by convention whenever we import this reducer function from redux form we make use of another little 88 00:05:43,170 --> 00:05:47,180 feature as a part of yes 6. 89 00:05:47,370 --> 00:05:54,960 Yes 20:15 module imports so we can freely rename imported variables like this if we want to by adding 90 00:05:54,960 --> 00:05:56,560 n as. 91 00:05:56,700 --> 00:06:01,090 And then the name that we want to rename this this reducer to. 92 00:06:01,110 --> 00:06:05,310 So in our case we're going to rename it to redux form. 93 00:06:05,310 --> 00:06:09,500 So now we can not make reference to reduce search inside of this file. 94 00:06:09,660 --> 00:06:12,960 Instead we would make reference to redux form. 95 00:06:12,960 --> 00:06:18,180 And so again we're doing this just because it's kind of confusing to have a variable called reducer 96 00:06:18,180 --> 00:06:20,380 floating around all over the place. 97 00:06:20,940 --> 00:06:26,790 OK so we're going to add in this reducer that is created by redux form for us to our combined reducers 98 00:06:26,790 --> 00:06:27,600 call. 99 00:06:27,600 --> 00:06:32,600 Now remember every single reducer that we add in here has to be assigned to some key. 100 00:06:32,670 --> 00:06:39,450 The key is very important because that is the key that this reducers output will be stored on in our 101 00:06:39,480 --> 00:06:41,780 state object maintained by redux. 102 00:06:41,970 --> 00:06:47,400 So because this year eight years off that's why in some of the previous sections we've seen like state 103 00:06:47,460 --> 00:06:51,620 DOT auth dot whatever is produced by this thing right here. 104 00:06:51,780 --> 00:06:58,740 So very similarly redux form has to be assigned to a very special key because relex form is going to 105 00:06:58,740 --> 00:07:04,470 assume that the value is being produced by this reducer are available on a very special key and that 106 00:07:04,470 --> 00:07:09,150 key is very appropriately named for. 107 00:07:09,300 --> 00:07:16,530 So we assign the redux former douceur to the key of form because that is where redux form assumes all 108 00:07:16,530 --> 00:07:19,520 of its state or all of its data is going to be living. 109 00:07:19,710 --> 00:07:24,990 Now if for some reason you are working on an application where you have some reducer that you really 110 00:07:24,990 --> 00:07:30,810 want to call form as well like you really want to call your own custom reduce or form and you don't 111 00:07:30,810 --> 00:07:33,800 want to have to use up this key for the redux former douceur. 112 00:07:33,870 --> 00:07:34,940 That's totally fine. 113 00:07:35,040 --> 00:07:37,430 You can always check out the official docs again. 114 00:07:37,650 --> 00:07:43,440 I think in the frequently asked questions they have an example on exactly how to change that key somewhere 115 00:07:43,440 --> 00:07:44,910 in here. 116 00:07:44,910 --> 00:07:49,800 Maybe not maybe it's in the reducer documentation over here but anyways just kind of leave that to you 117 00:07:49,800 --> 00:07:55,830 and you can figure that out if you want to I would say that you know being concerned about this key 118 00:07:55,830 --> 00:07:59,250 being form and wanting to use it yourself for your own application. 119 00:07:59,250 --> 00:08:00,240 Pretty rare. 120 00:08:00,390 --> 00:08:02,710 But you know again I thought I'd just throw it out there. 121 00:08:03,240 --> 00:08:03,560 OK. 122 00:08:03,570 --> 00:08:06,450 So that basically a wires redux form to our application. 123 00:08:06,570 --> 00:08:09,780 So now we can make use of all the different features and side of it. 124 00:08:09,780 --> 00:08:12,930 Now at this point we're ready to start working on our form. 125 00:08:12,930 --> 00:08:18,780 The only problem is that we don't really have absolutely any of the components that we really need to 126 00:08:18,810 --> 00:08:20,430 put the form together. 127 00:08:20,430 --> 00:08:27,720 So remember we've been talking about how we want to have a survey new component a survey form the fields 128 00:08:27,720 --> 00:08:29,340 blah blah all this different stuff. 129 00:08:29,340 --> 00:08:34,200 So before we really dive face first into redux form and how to use it we kind of got to do a little 130 00:08:34,200 --> 00:08:38,610 bit of bookkeeping and make sure that we can get this stuff just working out of the box. 131 00:08:38,730 --> 00:08:41,940 Just making sure that we have these components at all. 132 00:08:41,940 --> 00:08:45,370 So that's we're going to start with we're going to make to serve a new component. 133 00:08:45,420 --> 00:08:49,650 We'll make the survey form component and then maybe at that point in time we'll start thinking about 134 00:08:49,680 --> 00:08:52,660 how we're using redux form. 135 00:08:53,050 --> 00:08:57,940 All right so back inside of our code editor I'm going to find my SIRC component's directory. 136 00:08:58,270 --> 00:09:03,430 At this point all the files that are in here are kind of disorganized but now that we've got a big set 137 00:09:03,430 --> 00:09:08,800 of components coming in that are all related to a very singular topic I'm thinking that maybe we should 138 00:09:08,800 --> 00:09:14,680 combine all these components related to the form into a single folder so that it's really clear clear 139 00:09:14,980 --> 00:09:18,610 where to find components related to the surveys that we're creating. 140 00:09:18,640 --> 00:09:24,940 So I'm gonna make a new folder inside the components directory called surveys and then inside of there 141 00:09:25,090 --> 00:09:29,770 we will make our root components which is serve a new. 142 00:09:30,020 --> 00:09:37,130 Yes remember we had so the survey knew was going to be the top level component responsible for showing 143 00:09:37,130 --> 00:09:43,130 the survey form and the survey form of view and it's real job is basically to kind of toggle between 144 00:09:43,250 --> 00:09:45,060 both of these different forms. 145 00:09:46,460 --> 00:09:46,720 OK. 146 00:09:46,730 --> 00:09:51,440 So back inside the survey new I think that will just take care of a little bit of the boiler plate inside 147 00:09:51,440 --> 00:09:54,440 of here and then we'll take a break and continue in the next section. 148 00:09:54,740 --> 00:09:56,810 So let's put our boiler plate together. 149 00:09:56,810 --> 00:10:00,610 The first thing I want to do is create a class based component. 150 00:10:00,770 --> 00:10:04,560 So in this case I really am quite sure that we need a class based component. 151 00:10:04,790 --> 00:10:11,880 And once we start to implement the functionality of toggling between our two forms you'll see why. 152 00:10:11,970 --> 00:10:13,220 OK. 153 00:10:13,370 --> 00:10:26,980 So at the top we will import react and components react we'll make our survey new which extends component 154 00:10:28,330 --> 00:10:39,310 will at our render function on for right now we will return a div with just the text Servais new. 155 00:10:39,820 --> 00:10:45,800 And then we'll export default survey knew at the bottom. 156 00:10:46,310 --> 00:10:46,660 OK. 157 00:10:46,690 --> 00:10:50,550 So again just usual boilerplate for creating a class based component. 158 00:10:50,560 --> 00:10:55,270 Now before we end the Section One last thing I want to do just to kind of stuff as much code and work 159 00:10:55,270 --> 00:10:57,900 inside as your side of this video as we can. 160 00:10:57,910 --> 00:11:03,700 I want to flip back over to our outtalk G-S file and show this component inside of our re-act writer 161 00:11:03,700 --> 00:11:04,430 side. 162 00:11:05,020 --> 00:11:09,100 So we're going to go back to our components Aptos G-S file. 163 00:11:09,160 --> 00:11:13,630 Remember this is where we set up all of our different routing logic for our application and make sure 164 00:11:13,630 --> 00:11:16,030 that different components are visible on the screen. 165 00:11:16,450 --> 00:11:25,560 So inside of here we'll import survey new from surveys survey new. 166 00:11:25,990 --> 00:11:31,180 So unlike the dashboard and the landing pages this time the component that we're attempting to import 167 00:11:31,180 --> 00:11:33,370 sits inside of a file called surveys. 168 00:11:33,460 --> 00:11:39,640 And so that's why we've got the extra step in here now that we're importing survey knew we can dump 169 00:11:39,640 --> 00:11:47,120 the old dummy survey new and then I'm just going to double check on our route and make sure. 170 00:11:47,330 --> 00:11:48,100 OK. 171 00:11:48,370 --> 00:11:51,190 Looks like that's still the right component in here. 172 00:11:51,190 --> 00:11:51,500 OK. 173 00:11:51,520 --> 00:11:56,650 So let's do our quick little test make sure that we don't have any typos or anything like that. 174 00:11:56,760 --> 00:12:03,630 I'm going to change back over to my application and when I do I should see a reload here. 175 00:12:03,790 --> 00:12:05,250 So I'm going to forcibly reload. 176 00:12:05,290 --> 00:12:05,540 OK. 177 00:12:05,560 --> 00:12:06,480 There we go. 178 00:12:06,490 --> 00:12:11,330 So I've got survey new with an exclamation mark which is definitely from our new component. 179 00:12:11,760 --> 00:12:12,070 OK. 180 00:12:12,070 --> 00:12:14,010 So I think that's it for getting us started. 181 00:12:14,080 --> 00:12:15,130 Let's take a quick break. 182 00:12:15,130 --> 00:12:18,970 We're going to come back the next session and start tackling some this form logic. 183 00:12:18,970 --> 00:12:20,440 So I'll see in just a second.