[00:00:00] Hi welcome back to the reactor we're building in the sky. We want to set up our sign in form here. So what you see here in the design. So one thing I want to point out before we get started is that we will be building out the entire functionality of at least this part of the app before we get into any style. So the HDMI. All right. And more than just sex and a few other things are only slightly different than what we will end up with. And I just wanted to clarify that. So anyway the way we're going to accomplish this form is not by just writing out a form like we usually do. It's actually using this thing called redux for a relaxed form or just google redux form this is the first the first link. And so basically I recommend just reading reading on this. But basically the idea of this is so weak the relaxed form is to connect our form to our application state or to our store. So you can see where it says it so it says overview to connect you to read it react form components to your redux story you'll need the following pieces from the Readers Forum package. So basically the idea is to connect our art form components to our store and I'll show you why that is why we want to do this when we get around to it when we actually have it implemented. So let's go ahead and let's get started. [00:01:35][94.9]
[00:01:36] We need to use a specific component called the field component so you can feel that just seemed to so I guess 5 we don't need that. We're in. So it's as import fuel from the tax form. We're also going to need to import redux form with. So basically the idea of a field is to connect each individual input to the retail store. So in our case the email and password which is going to make it really easy for us to to to send requests to our servers so we can sign in the user and check if they're valid credentials so let's go ahead and let's get started. I'm just going to remove this a local host 30 tand slash site and I'll get. And the reason I did that was because I actually recorded this guide before this but I realized that my cousin. So I didn't record any volume. My voice wasn't it so I had to be. So basically what we have to do is going here and I already installed it and you might be seeing this and this is the code that I changed while recording it but had to reset because I didn't record my voice stream. So what do you want to do is we want to install redux form let's say npm install dash saving. This is important that you include the Save Tax. We consider it to be the whatever it's called the Pakistan Jaison so installed Ashton. And I would say redux form and wait for that to install it's going to take a hot minute I guess should be pretty quick though. So anyway what we want to do is now that it's installed we need to import what I said before field and Redux for if I could time. [00:03:53][137.6]
[00:03:54] K redux formed from the relaunch No no no read store. Okay that should be give us a double check. Okay. Yeah. So redox form and we have that implemented. Now let's look at what we need to do to get this implemented. So we have our expert people sign in but we'll talk about that after we get in our field. So first thing we want to do is write a function that will return as an input. So this is a little bit different than what we were doing before but it will make sense. So render input equal a function and I'm actually just going to type that like this because I'm not going to bind it directly. Right. So we're not all so ready to implant or vendor Yeah. And then in here we just want to return the sites which is a new Batak with class names equal to fall. And as we're building out these have these features before we style them. As I said we're just going to get on the functionality and the way we're going to style it. Until then it's just using some basic strat so we can see so we can see the the idea of it before. So it's a little more readable. They will change up the styling and everything and if we have the functionality in place so we want this we want to use a sprite operator on a field on a blip because we're passing in a field. So which is a part of redux form. I just came and called down field to get in here and it has some values. [00:05:27][92.7]
[00:05:28] So I'm going to get back out of that and next thing I want to do is give you time and this time it needs to be a field of time. Now what we want to do is actually put in these fields so we need to label larger components so let's call the first one to say I'm all for email and then and here we want to say email and then we want to copy this and do the same thing for password and then next thing we want to do is use this field component peer to get a field Smallzy field the email and then we want to say component is equal to render input so we can get this component this GSX and then we want to say time is equal to text. Now the next one is obviously going to be typed password because that is password and the name is obviously going to be password. Guess that's our form so far. Let's check it out in the browser and it's probably not going to work. All right. Yeah. So the reason it's not working is because we need to decorate it with real explorer so much like we use the Connect method or connect decorator and whatever it's called in the last apps we've been building we need to do the same with readouts from all right now the next thing I want to do is just make a google search and say connect the Ducks just so we can look out look at the syntax of this and kind of see the correlations between it and the tax form. So I'm going to read I saw work flash BASIX slash usage with react. All right. [00:07:12][103.6]
[00:07:12] So I'm going to search in here connect and see if you can import canape from reactor yucks. Okay so let's see what it says. Use a library like reargued. You might be using higher order components like connect the slots inject redux state and angular reactive component or nothing. You learned my bad regular reactive component and that's basically what it is is a it's a different kind of higher order components. Not I wouldn't I wouldn't consider it the most the type we would use most often but it's a higher component. So let's go ahead and use it. You're not. Not Kinect but the regex form 1. So let's go back to our application and instead of saying x4 default Synan we need to type in a little bit of different code. We need to say much and just remember that it's like connect so try and type this as I do it's a redux form and it gets imported now redux form and then I want to put it as the first argument. The name of the form so sign in and the next thing is we want to put our signed sign incomplete. So that's how it works. I'm going to have a way to bootstrap real quick and you can see there's kind of something similar going on here but we'll talk about that later. Now let's go to our sign and again and in here we want to put a button on. So if you go to our app here you'll see that we have our fields and it says read. [00:08:49][96.8]
[00:08:49] OK real quick it says redux form is not a function so let's kind of let's see why. Probably because we imported it with a capital R so well see what they do in here. All right. So they're not. This is just field. But basically what we want to do is get rid of this cap alarm right here and go up here and get rid of it as well. And I think that should fix it. Let's check it out in the. Oh yeah. So we have e-mail Basford. Let's go back to our map here and I want to head over to bootstrap real quick just to look at something. OK. So let's go back to our sign inside. I was just looking at something to see if I could explain but realize it didn't need to be explained right now so we are relaxed for then we have a form and we have a component of give us a submit button so we can actually submit our deal here. So class name and then I'm going to get this and bootstrap Button button primary sign in and then we need to change this to a 4 instead of a death. So we need the form and I will be up for let's get this in on the value of handl submit this dot handle form handle Samat dot Bitlis OK. Now with this we can have a method appear and call it handle form to submit or handle submit as equal to the function and then we need to basically add this line and so forth. So we have to say constant handles of make it's evil of this stuff props. OK. Nice. Now it's actually Nintendo forms of. [00:10:44][115.2]
[00:10:45] I wasn't going to. But now that I think about it it's good so we can kind of see the difference here because these snaps this maps to this point we ever button let's say in here console law la trying to handle form some of it. I don't know I you can do it but let's go into our app here and click submit a couple times. All right we're receiving it now we need to do is kind of talk about why about what we're going to do with this stuff. So we want to enter in an e-mail right and the first thing you can enter an e-mail and that's because it's mapped to our application state. So what we did before was forms in previous oxes we mapped it directly to our component's. But with redux form what's happening is it's mapping over to our actual application or global store which is a redux. So in the next guide we will learn how we can basically modify these values. And it's pretty simple. All we have to do is connected in our releasers so let's do that and then we'll talk about what we want to do when we sit at the port. So your code would say gets sound as good as it can get set up for free form. And yeah I'll catching the next Yeah. [00:10:45][0.0]
[640.7]