#110 React State Changes and Posting to the Rails App
12-17-2017

Summary

Continuing from the previous episode, we look at React's state changes and how to interact with the Rails application. We can get the native app feel, without using Rails Unobtrusive Javascript or Turbolinks.
6
rails javascript javascript framework react 17:40
  • Student & Teacher
  • $9.00 / month
  • Valid School Email Required
  • Same Access as Pro
  • Subscribe Now
  • Pro Monthly
  • $15.00 / month
  • Access to Pro Episodes
  • Invite to Slack Channel
  • Priority Episode Suggestions
  • Ad Free
  • Subscribe Now
  • Pro Annual
  • $150.00 / year
  • Access to Pro Episodes
  • Invite to Slack Channel
  • Priority Episode Suggestions
  • Ad Free
  • Subscribe Now
  • Teams
  • starts at $75.00 / month
  • 5 Users Minimum
  • $15.00 / user / month
  • Same Access as Pro
  • Subscribe to Teams
there are turning to ah to add a turn around and learned learned to use observed we look at any agree on components that displaying this a couple of it's within the parent upon in advance of son when i look a having a forum has ended up from the forum to or rails application and have the rails application save the day that and respond and hadn't reacted this way the updated information so we enter something like last name and first name and save it will automatically see it appeared would do wonders what i use any of the rails the j s which is creating a tucson response whenever we save the user then this information is and displayed from react if you remember from our previous up said we created a hello world component the within the scope on it we went through all of our users so we got from the server side and a week embedded is smaller component within their to dissuade the users first name last month in in this episode we want to display of formed right underneath their list of users so will call this just the user for their we need to give it a unique he and in this case and is gonna college user form and that should render the component is reform never we created so within our criminal be a good creator a coupon it would just grey with the react and and it will give it a name is reform within our app jarvis goods components for will create the user form that j s and within the user form which is quick to return any form is for ms would ever inputs and the submit button so we never start off with just creating a tag or just political this make new user there were going to create a couple inputs and the inputs that we're going to create are going to be our first name in our last name we create a place over there will close out this element so for the first one for clinical this first name it would just give it the place over first name the second one for dinner make this our last name with the place on her last name then you create a employed with a type of sin that and the smell will be urban and that's you to save the form well said the value to save user for it because this button isn't be in shape so is immutable one as of yet to be read only and within the hello world j s well don't forget the airport in the user form so gone back to our application out with you now see that we have performed rendered the weasel have worded it as being passed in from the server side so now we need to make it to wear whatever we have a ver same last name entered in the user hit save it's going to save the state in an asset to the server this is where things get a low betrayed he with react so the question does come up where shall we say the state so we have the one cup hundred for the user form that we had the component of the users the west of them the only an individual components for each one the names to the react augmentation suggest that with every year up or moles well ball is for your object as we should creature state and so an archaic system could be on the user form instead it's gonna be on the west of users so will we will need to do is to elicit whenever we make a change or number of inputs or the save button that this information is aspect to the previous component our list of users and in our case it's the whole world come home so what better use reform the first same employed when agreed a one change that this is going to reference save function there will create within the user form so will set the one change equal to there were going to call best i'd handle change the weekend copy this one change then also use it for the last name so we can even create this handle change has had a change for good at creating function in their work or they just pass in the event within this function we need to get a couple items one will need the first name they will also need the value there was ever done for the first name so we can set a variable name and then get our target and then preference the name that's gonna send it to the first name what this instance and it's also less aim then the head and change would be targeting the last name then upgrade no object and this is just going to be a hash and is good the the data that we pass back toward hello world cup on it the within the object has it's the one the keys the name there we went to get the bad or good golf outing and this is going to be the value of what the jews recite then we may call this op props they will need to create a westerner or the hello world component we're gonna call this the one user input so whenever the user makes a change to the implied they were going to call this on our hello world component will dispatch center object them back in the hello world fall we can go into horror component for the user form in the early game creator or user input and this user input is and what you call a function within this form so will call the function this diet and we'll call had no username public mean that we've got our user employed there we went to call the head or user input within the hello world said before we create the head of these are employed we needed create our initial state and the initial stages good to be set to what is our current values of our users so we're working with their whenever we make changes we want to update the state and what images hold off from there tell the user said it's the form with seizures months of form there we'll get a response back on the server there will update our state they won the state changes will they display on her new information so within our hello world come on it we're going to create a constructor the constructors going to pass and the props then also the context we don't interfere with the reactor planet would it still internet's constructor solo por point is just call super good passer props man also the context so it's going to be wouldn't normally does but there we can call this a state wiggins said the sequel to rehash is something and in our case would get a call this user's just like we did this to a proper argues years gordon has said the users to the stock props that users so now we would throw each one of our users instead of calling this out props and the process what's passed then from the server side when it said the source state so we had the stats they've got users good hero each one of them know we're really bring out the user component them were just running out the form component we getting create he had no user input we're going to retrieve or object that we got back from the user form no we want to set the stage to the object and because we have our first name in the last name which is basically going to it's going to creating another country within our state called for saying and also one for the last name and because we are bad scene object we need to make sure that we pass an object and we set her straight until we come back to our application we start diving into the first name with the react developer tools pulled up you can see that we ever props and then we have our state and there we have our first name unless saying we said the study and the strength that we have our users which is the rate at the two users we start adding it to the person and he gets a day it's changing the stayed over all the right hand side it's a more we type in the last name we see that on the right hand side though we never stayed change it's a noble we can do is whenever the user had to save user by then it's going to have that information of the values of the first to use or less user that we can get struck the hash to them pull setback or server so within our form we basically went to a lesser whenever the summit is happening so when the senate and they we can call another function that will create on this component there were just gonna call this the head olson it said we can create or had also done ruin it has an hour event in in the first thing that we want to do is perfectly formed from doing any actual actions so we're going to call you got prevent the fault in a scanner prevent the actual clicking in the bible from doing anything we call this op props in it we want to create a function in this function as could be something that the hello world will been an old and we're just gonna call this one forum submit bananas were not passing in anything because we don't need any day that passed through because we are yeah bars state said with the users first name unless a bell was just like then say we just me and all that trigger the trigger is that what to make opposed to war will separate kitchen so back in the hello world j s fall beginning create a another line here and this time we're going to have more one form cement so whenever this is called we get a call in other function within the hello world j s well so we'll have to create a worse is going to call this one does start and all forms met so we get a creator and all forms a minute and this i'm we're not passing and any can object because we're just handling the action and we so i have access worse state the first to we need to do is to create or has so we're going to smack so on and it does create a hash an abundance of the first name and decide we needed called the sad state but for some years warning this whole reference from the state object that we sold within our reactive opera components we then also pass in our last name what is said the last eight to the sad state of glass underscored it we then they get ajax post but because we're not using j queried we don't have access to the vet see our side that ajax said i'm just going to do a fetch and we need a peasant are you ride this case we're going to make a post to the users so we can said or meant that the post there we want to set the body or in this set the body to age is on god string of five this is just to get the data for medic records where is going to look nicely and because we are using strong parameters we need to set our user object to the user variable that we just created there we need a common set of the period there so no we get back into some actual rails to thelma and so on her kid that file we need a creator routes for the users so right now if you remember from our previous episode which is set a welcome controller with the index now we call the resources and users were only going to need a create action so i guess best buy only in and create they need to create our users controller then does get a call this the users controller on or be within here it's gonna be a class users controller and it's going to inherit from the application controller it will december one method with the recalled create this so what are created actions called we're going to creator user the word medical user guide knew they were not call agree a year because we won at all if it does not say successfully may be due to some validation issues and so we need a passer brands the prem so we're gonna pass and we play what to make strong prime so we can just create a private medical abuser friends and then spread that the use of friends were going to call our friends that require there we want acquire our users there were going to permit the following attributes the first name and the last name in that we'd save the user to save services successfully that we can render the jason they were just gonna pass the user object otherwise we can render some jason this guy when he's able with bronx we can call use riders and we can give this a status update on possible entry but because we don't have the authenticity token a sudden i had to call the skipper for action and the verify the authenticity token and before we taxes out we also need said some headers with a perfect request and the main thing that we need to do is to set the carpet type we wanna said the content tied to application jason that we also need to set the mode and the mind is going to be the same origin so now we come back for application we in grade eight first name and a last name and then we can save the form so it doesn't look like it did anything why every come over and look at our rails logs we can see that we got her parameters from the client today we inserted the records and so if you notice when we come back door page even though we did say if we still have our price with the users are brave to then our state has only two users decide to we breathe fresh her page to receive the first name last name show up when they get updated to three so next whenever we say if they will we get a response back from our fact we wanna make sure that we're updating our state so with perfect so you say then there we won a year and a promise and it's going to be our function response and the response is gonna be the data that we get back but it's kinda be in the form of a promise so we want to return the response but jason and then with edges some responds the game then they were in it take our promise and words could create another function this i wouldn't take her promise and i'm just inequality letter j. the weekend do something with a promise and in this case we want to create know the function that's going to go up the interstate and our views so we're good as they add new user nor did the best in the juice on more spots in order for this to work we need to buy and to the us so you think we're at new user it would it take in our users and within a year we want to update your state so we came for screening variable called users gordon has said this to this that state that users which is are are are rated users there were hanging chad really impressive rate and then or user we make all the sunset state then pass and the hash a call users there were good as a torrent users so we just acquired but because we're updating our state because we're mapping out within our component the state of the users it'll automatically update so if we come back your application now we invent has to sell when you see that they automatically post and if we make some more changes you see that it automatically updates i know this on the right-hand side within the reactive approach tools are prob stay the same letter say it is updated if we order refreshed would expect the props be updated because now is getting a bit dated back from the server said now we have our props are really upset and then we have our users are ready so sometimes if we want to change it or in which it's adding and says added at the end but if we want it to sort out our ready there we could also be like sort and if we want to sort the users is the same thing that we can call sword in their past and the function and the folks who were going to take in a and b record to return it to bear send out the date and the same board as a baby that created and subtracting from the new date of a god created that and yes we're doing a b. minus say it's going to be descending order so coming back to the application if we we first the page you see that someone is standing water where if we added a new element in saying that it's not all in the sending of water so we need to get our initial state it gets loading into the props he's sending and then whenever we have a new record would then be the standings shortages while to refresh an easy goods bachelor's ending that's pretty flexible with their welcome controller where we said the users to the users on all we can simply just call the order the world would call the created that georges can make this descending sit back in the application if we refresh the page it's a decent in order the only create a new user and hit save at all then also be in descending order still that's all for this episode they give watching