React Redux-form Simple guide
We have a series of articles about react and how it works with redux
In this article i will try to make redux-form simple to understand as i could, But before you start you should have a basic knowledage about react-redux.
We have a library called redux-form, Some people think it’s kind of challenging to understand but on the other hand it does a lot of process for you automatically,Which makes life more easy compared to if you try to write all this different forms by your hand.
[1] — Handling forms by hand
- Before we were handling forms using state and a call-back function to detect the change of our input using setState.
- JavaScript function that handles the submission of the form and has access to the data that the user entered into the form.In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().
[2] — What is redux-form and how it work ?
As we say before redux form is a react library, consists of four things:
- A Redux reducer that listens to dispatched
redux-formactions. - A React component decorator that wraps your entire form .
- A Field component to connect your form elementd to the Redux store.
- Various Action Creators for interacting with your forms.
Here is how it work.
- First redux-form has its own reducer ( Redux Store ) all of our form data is going to exit inside this redux store.
- Second we want to make sure to get this data from that store into our input or whatever elements type we use,This will be done using something like mapStateToProps.
- After we passed data into our input, Anytime a user makes a change to an element, We are going to have some callback handler inside of our component that is going to call an action creator and try to update our data inside redux store.
Do you think all of this is hard ha ? Here is the tip redux-form is going to do all of this stuff for us automatically.
You aren’t going to write a reducer, or a mapStateToProps or creating an action creator, all of this are included inside redux-form library.
The only thing you and I are going to do is to make sure that we get some information down to our input form element and this input understand that it needs to call some callback handler.
Before starting to write our code take a look at the documentation if you want.
https://redux-form.com/8.0.4/docs/gettingstarted.md
[3] — Installing redux-form
Open your terminal and write this command.
npm install — save redux-form@8.1.0
[4] — Connect Redux-Form to your project.
- Make sure you installed redux-form at your project.
- Create a new react application.
- Inside your src folder at your app, Create a new folder at your project and rename it reducer then inside it, Create a new file with name index.js
- Inside this file we want to import redux-form reducer, then combine it at combineReducer function ,If you have any reducer yet don’t forget to add a callBack function that return anything to avoid getting an error at the browser “Reducer is not defined”
- Import this reducer file at index.js of your project.
- Now create your component that will contain your form and name it whatever you want and make sure to import it correctly to App.js.
- After we have our component, We will import two helpers from redux-form library.
- Field is captelalize cause it is supposed to be a react component & reduxForm is supposed to have the same functionality that connect function have.
- We will use reduxForm like we use connect function before when we connecting react with redux, But unlike connect function reduxForm receive a single object.
- Remember the name of the key that we used at our reducer file? We use it here as key of the single object and the value whatever you want to name it related to your app.
- Now let’s use Field component, We use it when we want to show a form elements to the user like input and to make it appeared without any errors we have to give it a name property and it have a property called component that take a function that return the form element we want to show.
- Here is how our component now should be
- Congratulations now your input appear on the screen :)
- Now we want to get it’s values so let’s add a submit button to the form and a Submit function
- Take a look at renderInput function, it has a param { input }, it is a short syntax redux-form provided it for us to get our form elements values instead of getting them using props.
- Look at onSubmit property, before redux-form we were using only {this.onSubmit} but with redux-form things are different {this.props.handleSubmit(this.onSubmit)} When the form is getting submitted handleSubmit will receive event object and automatically call preventDefault for us Then it will pass our values.
- Congratulations you can your form values at your browser log :)
Now you should have learned :
- How we handling forms by hand without redux-form.
- How redux-form. work.
- Installing redux-form.
- Connect redux-form to your project.
References :
