React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

redux

Working with forms can be laborious, but redux-form takes out the tedium and replaces it with an enjoyable way to create beautifully crafted forms. You get the benefit of integrating form state with an existing Redux application, plus the ability to track the state of your form with precision in Redux DevTools, without writing lots of boilerplate code.

In this course, we will use the redux-form package to create a form whose state is easy and enjoyable to manage. Over 46 minutes and 14 lessons, we will:
* find out how redux-form ties into a React/Redux application
* learn how to use both synchronous and asynchronous validation
* use real-world examples and effective ways of presenting relevant information to the user

Learn to create precise, reusable form components, and enjoy yourself in the process.

Maxime Bourgeois

In this course, we are going to use the redux-form package to create a form whose state is easy and enjoyable to manage.

Using redux-form, we have a resource which provides not only the benefit of integrating form state with an existing Redux application, but also being able to track the state of our form with precision in Redux Dev Tools without writing lots of boilerplate code.

Specifically, we are going to find out how redux-form ties into a React/Redux application, how to use validation both synchronous and asynchronous, applying real-world examples, effective ways of presenting important information to the user, and creating neat and reusable form components.

Working with forms can be laborious, but redux-form takes out the tedium and replaces it with an enjoyable experience creating beautifully crafted forms.

Course Overview: Manage React Form State with redux-form

We are going to use `create-react-app` to set up a React app. Then, we are going to install redux and redux-form as dependencies and add Redux Devtools.

Bootstrap a create-react-app project with React, Redux, and redux-form

In redux-form, the `Field` component is used to supply a form field and connect it to our redux store, by using the `name` prop. In this lesson, we are going to see how to use the component in the simplest way possible; passing a string of a form element (e.g. ‘select’, ‘input’) as the Field’s `component` props;

Create a Simple Form Field in redux-form

We can pass a custom component to redux-form’s `Field` component. This way, we have a great deal of control over what gets rendered as part of the field (the type of input, label etc), and re-use this component for other fields of the form. We can use the `input` prop, provided to us by redux-form, to easily hook our input field up to redux.

Use a Custom Input Component as a redux-form Field

We can set initial default values to form fields in redux-form by using the `initialValues` prop passed into the form component. Let’s find out how this is useful to improving the user experience of our form.

Set an Initial Value of a Form Field using redux-form

In the `Field` component of redux-form, we have access to the `meta` prop. This allows us to access information about the state of the field, for example whether the field has been touched, or whether it’s valid.

Access the State of redux-form Fields using the `meta` prop

There are two ways to handle validation in redux-form. In this example, we are going to look at using a validation function to validate the fields of our redux-form.

Add Synchronous Validation to a redux-form using a Validation Function

There are two ways to handle validation in redux-form. In this example, we are going to find out how to use field-level-validation using reusable functions, which presents a clean, readable syntax attached to each redux-form `Field` element.

Add Synchronous Validation to a redux-form using field-level Validation

We are going to add styling to a redux-form Field that reflect its state. For example, if a field is invalid, it will have a red background, and if it’s valid, it will show a green tick next to the field. We are going to look at how to use a Field’s `meta` information for fine-tuning of under what exact circumstances such feedback shows, based on how the user has interacted with the Field.

Add Styles that Reflect the Validity of redux-form Fields

Sometimes, we need to be able to access values of a form while evaluating another part of the form. For example, we may need to compare a password with a confirmation password to ensure they match each other. Let’s find out how to do this with redux-form.

Access Other Values of the Current Form with redux-form

After the user hits the ‘Submit’ button of a form, we may want to perform some server-side validation which involves checking our database to evaluate the validity of our form.

Use Asynchronous Validation after Submitting a Form in redux-form

During the user’s process of inputting, we can make an API call to present information to a user even before the form has been submitted. This can be useful because it means the user can find out about the validity of their information without filling out the entire form first. For example, we can tell the user whether or not their desired username is available immediately after they input it.


Use Asynchronous Blur Validation while a Form is being Filled out using redux-form

Sometimes we need to add a limitation to what the user is inputting into a redux-form Field. For example, in a license plate lookup, we want all the letters to be uppercase regardless of whether the user types them in caps, or when taking a user’s name, we may want the format to be capitalized.

Limit or Control What gets Input into a redux-form Field using normalizing

There can be situations in which the user needs to add or remove fields from a form depending on the amount of fields they need to fill out. Using redux-form, we can use the built-in `FieldArray` component to easily deal with this situation.

Manage React Form State with redux-form

Rory Smith

Credits

Course Content