[00:00:01] Hi welcome back to the reactor building in the sky. We're going to basically connect our signing component here to our application store. So our global state kind of our global education state and the first thing we want to start off with is getting this working by basically modifying or state to reflect the changes. So you see that we've connected it here where we've used this tech decorator is hiring a component here e-tax form to connect or signing component with for. So now we need to add over to our reducers here so it's good to reducers and Nexstar. Yes and we need to import the Wheat Export Ramees or so import. And then it's coproducer but saw shades improve in producer from the ducks form now we can just say here reducer but that's kind of not very clear we're going out more reducers in here such as our authentication based newsletter reducer. We don't want to have this call be colored so we can use this little 6 trick here and say reduce it and then we can say what we want to call it. So I'm going to call it form and then I'm going to perform it here. So yeah we have a former teacher here. And the reason we don't want to put a call in here is because we are worried and called for them and we want to call them if we wanted to call it something else. You can see from research that put not before. But I want to go forward. Let's just do that. [00:01:38][97.0]
[00:01:38] Now if you head back to the app you'll notice that we cannot get text to me typing which is fantastic. That's what we want and that's all dandy. Now the next thing we want to do is actually have our submit button here do something with our e-mail password. So let's head over to Art here and let's go to our sign in JavaScript and let's make it do something when we hit form right now it's just logging. Trying to handle forms that we can get rid of that and we can make it usable. So for our function here we want let's get rid of this do. OK now let's first printers here we want to put the e-mail and we want to put a bottom. So basically we want to pass while it's automatically going to do it on the internet because we're using this form. You'll notice if you hit submit here or sign in even reload it needs signing was not doing what I thought it would do. Let's get rid of this function and see if it works. So it's just in the form of say I go back here and reload it when it's signed in. OK. You'll see that says email and password. So it's taking our fields and passing it in through the front. So let's put this function back in here. And we know that passing through here so we can access these values and dissuade them so they cancel the log on the site email and they call this a long password and see if it's getting the content. So it's reload seconds and content password. You'll see that sign reading those down there. [00:03:22][103.8]
[00:03:22] So now we need to do is just get this to hit our servers somehow. So let's go ahead and let's think about how we can do this. And it's by connecting our signing component here further to our reducers our application or redux here so we can perform an action. So if you remember we have actions here and then it's like a function and then that dispatch is an action to our index or reducers and then our reducers will do something that we want to do it wanted to do. So let's go ahead and start off by creating a file in actions called type doneness type stuff Jairus. And here we just want to export the ball and not the forward constant and then we want to call this what we would call sign in where let's call it. Yeah let's it sign. Well we don't even need this because we're not going to actually dispatch anything because we're actually going to be writing a reducers. Normally we dispatch something but we're going to do is we're going to be writing an action that performs a request and that's written a little bit differently. So we don't need the Times files let's relock because a lot of later in our next that jazzier we want to do something. So let's call this function sign up or sign in user and what we need to do is basically each type of thing export function sign end user and then we want to do is pass the email password so we can send them now and here we need to perform requests. [00:05:02][99.3]
[00:05:02] Let's do this using ASIOs because it's super simple so it's a third party library in our terminal it's just install it so NPM installed on your dash that save ACSI us. Now once that's installed we can import it up here. We can say import ASIOs from ASIOs. So that's how that works. Now we can create a post request because we want to post to the server that we're signing in and we can say with the party you are in here and the point we want to hit is let's see call sign so and then we want to put a function parameters request results and 9x let's just say requests and result should be good. While we don't want to do that because see we want to argument because what we're doing here is posting to this round password as parameters to sign in and then we want to say down here just like a normal prom's dot then response arrow function and down here dot catch. I think we get there and we can call if want. And then now we want to do is cut this and we actually want to return a function because in our normal actions we're dispatching an action. For now we want to return a function and pass dispatch. Okay now we can dispatch an action in then and catch but we're not going to do that yet. Briskin or it canceled out long response that data token because we're going to be receiving a token back from the server and then an error. We're just going to say console the log let's just put. Okay now what we have to do is keep it around here so this isn't going anywhere. There's no website called sign it so sign it. [00:07:02][119.6]
[00:07:02] We have to actually have an employee and or a your Oh I get that you are Eliz is just getting pasted in here because it's the one you were all and basically it's a Heroku app that I wrote I wrote a server in 9 node and Mongo and express and I pushed it up on Roku and we're not going to go for that because that's not Python or react but basically this is giving us our backend. This is what has around us and that's what's going on. I was to sign in and Howard data so if I actually pull up I have the database on MYOB and I can show you what is in the database right now and it's actually just a couple of users so we have an admin user and a standard user and that you can differentiate by saying seamless is admin key says admin and right here there's no admin again so that's another thing. When we're building up these are not going to have any way to create an admin because we don't want a bunch of admin accounts so we're just going to use the admin account that I created and that's going to allow us to access different permissions with that account and only on account and the other account we make is going to automatically be a standard user account of this basic permissions of the application. So what we need to do is put this world in here and we can do that with string interpellation using backaches and then just throw right in front of the slash signs of root or else slash site. [00:08:40][98.3]
[00:08:42] Now this should allow us to reach power to reach our server and tell us that we're saying that and if we're signing successfully it's good returns a token if we supply a incorrect username and password that's going to give us that. And obviously we don't have any accounts. We have built the sign in feature yet. So what we have to do is use one of the accounts I generated already and will do that with the admin again. And you'll notice that the passwords been encrypted and I made it that way on the back end because that's what you need encrypted passwords or you're going to get you know with a lot of users. So what we need to do is you're going to get hacked. So in our application you don't sign in using I mean you get a copy Zaku I'm typing right now so admin and admin Dakang and then the password. Honestly don't think I've read my password. What's that sign in your back. So nothing's happening and that's because we're not actually calling this function. We need to connect our site component to our our actions so we need to import of the top assigning import and then we want to put a star and Rena's different than we did before before we said dispatch we made this function called dispatch map dispatch props. And this one we're going to do this a little differently so I give you the same taste of everything. React a little bit about the different approaches not just doing the same thing over and over again. Now I'll be learning more and keep things a little more interesting new. So import start. [00:10:21][99.7]
[00:10:22] And then we want to say as actions from slash slash actions give us access to all our actions and it's actually a lot cleaner method a lot cleaner way of getting our functions. We don't have the type of function map dispatch in here so we want to posit in the same place and you'll see that this is kind of messed up. We have a release form and obviously results form isn't going to take our map despite Sprot props we need connect. So it's not what's important connect from react redux. Now we want to do is basically wrap the entire thing. So but we can't do that immediately. Well we might be able to say connect wrap this entire thing in and then see we put the map to see the props in front of it so we actually wouldn't want to wrap the entire thing will just say connect and then we put parentheses around Predix for. And then in here we would put what we would put actions okay. So that should work if it doesn't. There's another way we can use. And it's not working. I'm sure that's because we haven't provided Moxie props so we need our function still Naxi we don't need not disbursed props. So that's what I was saying earlier is we don't need Mac dispatch props. We'd still have massive props because that's the only way to access our state. So a similar function in our current state and that will go back here. First you'll see the users and that's because we need to pass in that seat. Props for actions they that the app and it might work. Might not. It looks like it works. So basically we have this set up correctly but to clean it up a bit. [00:12:09][106.9]
[00:12:10] Let's just take our assignment here signing here and you'll notice that the way we can fix this is a Lotus before when we had like it in the previous when we were connecting we didn't have all this extra junk we just had signed it or whatever the component was that we were working on. So you might be able to see here that okay if this is taking sides and then this whole thing could technically be signed and so we can just kind of how do we do it and then say Sinding is equal to 3x form sign it. So basically that's going to replace Simon and that will set it up good. So save it and add back here and reload the app and it's working just the same. Now we have access to a state and we have access to our actions. We don't need to do anything with the state at least now we don't. But we need to access our functions. So with her props now with actions we can say this thought process a sign user I think it's in use and we just need to pass the email and password because if you check in or index you are not in a reducers but our actions we have signed a user with an email. So how can this function. And it's going ahead or you're out. And it going to trade it. So let's go over here. It's really not that that hasn't been done itself already. Let's give calm and say Password Password sign and it says error actions must be plain objects use custom middleware for using actions. [00:13:52][102.5]
[00:13:53] And the reason it's doing this is because we need to tell our story that we're using redux. So that's another thing we need to introduce is redux thuck. Basically we're reax Funky is is it's middleware. So if you google redux thug and go to the NPM link you will get a good explanation of what it is and Samin and install weightiness. So I'm taking a basis and here it's NPM just dot com slash package slash redux thunk now says and given Thall say redux. So let's copy that and put it in here. Make sure there's nothing on here. And while it's installing what's go back to the NPM package here and let's read it and see what's going down. OK so are our import imported Exxon class just how easy is now was he says is why many does not need it. You probably know but you just have no idea what we're doing because it's a tutorial. So basically it stunk middleware allows you to write action traders that return of function instead of an action. So like exactly what we just did and here we're turning a function we're not returning an actual normal reducer will be something like this. Normally when you write something like this and you remember from the last application that we wrote out functions like we do return that time and say like sign in and then we would say payload. And then in here we would put that the password. All right. And that will go you a producer and then reduce or do something. [00:15:40][106.6]
[00:15:41] But when we have to perform requests we don't want to send that to the release or B wants to be synchronous in nature. We don't want it to all be happening at the end. We want it to be operating in a good flow. So that's where Redus funk comes in and that's where I'm get to work. So we have this description here and again this is really Sonke middleware Lozzi Direct Action creators or return function inside an auction that can be used to delay the dispatch of an action or dispatch of a certain condition is met. The inner function receives the store methods dispatch and gets the parameters and arching creator that returns a function to perform an asynchronous dispatch. So they give us an example here and same idea. So right here they're dispatching him there are returning an action. So this is like our action and then they're just returning Inkerman counter which is then incrementing the count. So basically there is a pretty good description of what it is because a function that robs an expression to delay its evaluation. Okay so calculation of almost immediate calculation was delayed can be called later to perform the calculation. Who is a on. So basically it's a function so to speak functional Rabson expression tearaways vibration. So we were to simply assume we have this post requests in here it would immediately go off. We want to only have a go off when when we want to. So basically a function but now that we have that installed lets set it up and you'll see here that it is then to a neighborhood of Songhua applying middleware says store equals creates or reproducer apply middleware thunk and you can find this bootstrap Dodge's here. [00:17:36][115.7]
[00:17:38] The top create store middleware applied middleware create store had the PM says create store apply middleware thunk. So we have to do is passing Thum to this function but I believe we can call it just regex func so we can say import docs from from this func and then now we just need passes to apply. And if that doesn't work we will do like 13 here which is stuck or actually just do that anyway because that's what they put. That's probably the most up to date way of doing it but let's first reload our page and transcendence admin admin and dot com and Password password in and nothing happens. So first things first changes to thung. I can't imagine that is the reason why it's not writing and thumb through the page. Okay admin and admin password signed in and we get our requests back and you'll see a big piece of the text and that's our token. So if you head over to network you can see that we perform assigning requests and we are brought back from this big long token not this token is going to allow us to perform authorized requests to our server so we can perform different actions so that's when we're protected around come in because when we have this job we are going to want access. I'm not going to want other people to be able to access certain pages that they're not allowed to. So basically we could have very well. Yes. Yes. That we don't want someone to be able to access our requests so if you if we live in the same apartment complex different different apartments and you submit a request. [00:19:46][128.2]
[00:19:47] You don't want me to have access to that. And we will let you only wire access to that because it's your request for your apartment and not mine. So basically that's what this token allows us to do is access all the right is access protected routes. Tell us the Rotherhithe. And that's exactly why we get back on site. So that's how science works and that's how redux works. Let's go ahead and commit our code and in the next guide we will learn a little bit more about what we need to do when we had signed in and that is redirect us to a different route which is going to be our Newsletter out which is going to show us our newsletters. So let's go ahead and commit some get status and get commit let's say we did a lot in this video. Let's just say connected sign into law are implemented stuck. All right. I will catch you next guy. [00:19:47][0.0]
[1177.7]

https://bottega-property-management.herokuapp.com/