[00:00:00] Hi welcome back to the reactor building. So last sky we set up the Edet newsletter out and component in this guide we are going to use redux form so we can get our form on the screen much like we did in the signing compiling and have a really easy way to connect it to our store and after we've done that we will actually use redux to connect to our air component to the store. This way we can do what we did when we clicked on a when we clicked on an item here someone and click it. It touches the information from our store and puts on the screen. So same idea we want to have the ability to touch the item when we hit it. And with that data we can fill in our form with the content. So like you see in the design there's the content we need to fill in and we'll do that with that. And then after that we will create an action and a promise in that action so we can actually fetch or we can actually put this new data on our server and we can replace that data and I'll show you a little bit of. I'll show you how postman works dermis some tiny little developer tool we can use if we want. And then after that we will make the redo surfers save edited. I don't and this will allow us to basically store our newbies or any new data packet. So let's go ahead and start with the redux form. [00:01:39][99.2]
[00:01:40] So let's go to the code and let's open up our assignment because it's very similar and I'm going to drag it over here. That way I can have the sign up in the newsletter or edit so I'm just going to copy basically all of this or all of it over and take render input form submit and all render. Now I'm just going to throw it in there are places of rendered. So this way we have our render input and that will give us our input. We ever hand the forms submit though we don't want to be doing this signing the user. We don't even have access to that without connecting it with redux and all that junk. So we'll leave that and then you know render we want to change a few things. We want to see title HQ for title we want this field to be titled Let's make the labels a title and then the type is still text the password we want to change this all the body and type to text. Okay so that's good that's got a set up and we're going to skip over the image for now just cuz we are a little bit more functionality that will kind of distract us from understanding the next storm directly. So we need to push that aside for now going around earlier. We want to focus on kind of the same concept who didn't sign in and sign up so we can kind of drilling or answer. So we have said that we want to change this to save. And then we also put in a button for cancel. So that's super simple. We are going to use the link tag so import link and make sure you like curly braces from beotch. [00:03:17][97.8]
[00:03:20] And then we just want to put it down here and say league and then say two is equal to the newsletter because we just want to go back to our newsletter to phone calls it off and then within it we're just going to put a div and type out cancel. OK so save that. And if you go to the app it's not going to work. First things first. If we get that newsletter or the edit newsletter Yeah it's not going to work. And for good reason. Let's go back there and get a newsletter and it doesn't work. We get an error that says handle Samit is not a function and we'll see why. So the reason it's not working is because we haven't we are used redux form down here. So first thing we have to do is check over on our side and it looks like we're missing important fields so that's one thing you don't even feel is important and Redux for from read this fool. So make sure you have that import. And then down at the bottom we need to kind of do order here so we can say right here that newsletter is equal to redux. And then we can say the fourth is that see the newsletter. And then we just want to decorate our site component or not are saying added news. Okay so that's all set up and just so you understand syntax here of unexplored what's going on here. [00:04:51][91.6]
[00:04:52] Well first we wanted to do this export quality because we're setting an equal we always could just say X for the bottle on that but since we're going to be doing the same thing here with connect. Is going to do this now. But you understand the syntax of what's going on. This is basically just an object a javascript object for more items in here like this. Just say your stuff right and put this on a separate line. You might become aware if you're not already that this is just a javascript object much like we have with a lot of other things we're doing so that's how that works just a javascript object that we're passing into this function. So I'm going to go back to that and do that. That's just something that I thought I should point out because when I was learning I learn new things like this. The syntax can throw me off when it's honestly something I actually already know the syntax at least so I thought I might bring that up. But yeah that's it to perform in the next guy. We will get along and we will basically use redoes to import so we can actually have the function where we can fetch our item based off the. And then once we have that whole set of we will move on to actually do that. That's the newsletter. So put a code store in there make sure all your files are safe and safe and status. They can commit. And I'm just going to say we implemented three docs into the newsletter or the added newsletter component. Okay. Catching the next guy where we will get into redux. [00:04:52][0.0]
[288.6]