redux-form
works with React Redux to enable an html form in
React to use Redux to store all of its state.
- Installation
- Release Notes
- Benefits - Why use this library?
- Implementation Guide <-------------- Start here!
- A Simple Form Component
- ES7 Decorator Sugar -
⚠️ Experimental!⚠️ - Binding Action Creators
- Synchronous Validation - Client Side
- Asynchronous Validation - Server Side
- Submitting Your Form
- Responding to Other Actions
- Editing Multiple Records
- API
createFormReducer(sliceName, fields, config?)
reduxForm(sliceName, validate?)
reduxForm().async(asyncValidate, ...fields?)
props
- The props passed in to your form component byredux-form
- Action Creators - Advanced
- Working Demo
npm install --save redux-form
This project follows SemVer and each release is posted on the Release Notes page.
Why would anyone want to do this, you ask? React a perfectly good way of keeping state in each component! The reasons are threefold.
For the same reason that React and Flux is superior to Angular's bidirectional data binding. Tracking down bugs is much simpler when the data all flows through one dispatcher.
When used in conjunction with Redux Dev Tools, you can fast forward and rewind through your form data entry to better find bugs.
By removing the state from your form components, you inherently make them easier to understand, test, and debug.
The React philosophy is to always try to use props
instead of state
when possible.
When you are adding your reducers to your redux store, add a new one with createFormReducer(])
.
import { createStore, combineReducers } from 'redux';
import { createFormReducer } from 'redux-form';
const reducers = {
// ... your other reducers here ...
createFormReducer('contactForm', ['name', 'address', 'phone'])
}
const reducer = combineReducers(reducers);
const store = createStore(reducer);
reduxForm()
creates a Higher Order Component that expects a dispatch
prop and a slice of the Redux store where
its data is stored as a form
prop. These should be provided by
React Redux's connect()
function.
You will need to wrap your form component both with
React Redux's connect()
function and with redux-form
's
reduxForm()
function.
import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import reduxForm from 'redux-form';
import contactValidation from './contactValidation';
class ContactForm extends Component {
static propTypes = {
data: PropTypes.object.isRequired,
errors: PropTypes.object.isRequired,
handleBlur: PropTypes.func.isRequired,
handleChange: PropTypes.func.isRequired,
handleSubmit: PropTypes.func.isRequired
}
render() {
const {
data: {name, address, phone},
errors, touched, handleBlur, handleChange, handleSubmit
} = this.props;
return (
<form onSubmit={handleSubmit}>
<label>Name</label>
<input type="text"
value={name}
onChange={handleChange('name')}
onBlur={handleBlur('name')}/>
{errors.name && touched.name ? <div>{errors.name}</div>}
<label>Address</label>
<input type="text"
value={address}
onChange={handleChange('address')}
onBlur={handleBlur('address')}/>
{errors.address && touched.address ? <div>{errors.address}</div>}
<label>Phone</label>
<input type="text"
value={phone}
onChange={handleChange('phone')}
onBlur={handleBlur('phone')}/>
{errors.phone && touched.phone ? <div>{errors.phone}</div>}
<button onClick={handleSubmit}>Submit</button>
</form>
);
}
}
// apply reduxForm() and include synchronous validation
ContactForm = reduxForm('contactForm', contactValidation)(ContactForm);
// ------- HERE'S THE IMPORTANT BIT -------
function mapStateToProps(state) {
return { form: state.contactForm };
}
// apply connect() to bind it to Redux state
ContactForm = connect(mapStateToProps)(ContactForm);
// export the wrapped component
export default ContactForm;
Notice that we're just using vanilla <input>
elements there is no state in the ContactForm
component.
handleSubmit
will call the function passed into ContactForm
's onSubmit
prop.
Using ES7 decorator proposal, the example above could be written as:
@connect(state => ({ form: state.contactForm }))
@reduxForm('contactForm', contactValidation)
export default class ContactForm extends Component {
Much nicer, don't you think?
You can enable it with Babel Stage 1. Note that decorators are experimental, and this syntax might change or be removed later.
If your form component also needs other redux action creators - and it probably does since you need to submit
somehow - you cannot simply use the default bindActionCreators()
from redux
, because that will remove
dispatch
from the props the connect()
passes along, and reduxForm
needs dispatch
. You will need to also
include dispatch
in your mapDispatchToProps()
function. So change this...
import {bindActionCreators} from `redux`;
...
function mapDispatchToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch);
}
ContactForm = connect(mapStateToProps, mapDispatchToProps)(ContactForm);
...to...
import {bindActionCreators} from `redux`;
...
function mapDispatchToProps(dispatch) {
return {
...bindActionCreators(actionCreators, dispatch),
dispatch // <----- passing dispatch, too
};
}
ContactForm = connect(mapStateToProps, mapDispatchToProps)(ContactForm);
You may optionally supply a validation function, which is in the form ({}) => {}
and takes in all
your data and spits out error messages as well as a valid
flag. For example:
function contactValidation(data) {
const errors = { valid: true };
if(!data.name) {
errors.name = 'Required';
errors.valid = false;
}
if(data.address && data.address.length > 50) {
errors.address = 'Must be fewer than 50 characters';
errors.valid = false;
}
if(!data.phone) {
errors.phone = 'Required';
errors.valid = false;
} else if(!/\d{3}-\d{3}-\d{4}/.test(data.phone)) {
errors.phone = 'Phone must match the form "999-999-9999"'
errors.valid = false;
}
return errors;
}
You get the idea.
You must return a boolean valid
flag in the result.
Async validation can be achieved by calling an additional function on the function returned by
reduxForm()
and passing it an asynchronous function that returns a promise that will resolve
to validation errors of the format that the synchronous validation function
generates. So this...
// apply reduxForm() and include synchronous validation
ContactForm = reduxForm('contactForm', contactValidation)(ContactForm);
...changes to this:
function asyncValidation(data) {
return new Promise((resolve, reject) => {
const errors = {valid: true};
// do async validation
resolve(errors);
});
}
// apply reduxForm() and include synchronous AND asynchronous validation
ContactForm = reduxForm('contactForm', contactValidation)
.async(asyncValidation)(ContactForm);
Optionally, if you want asynchronous validation to be triggered when one or more of your form
fields is blurred, you may pass those fields to the async()
function along with the asynchronous
validation function. Like so:
ContactForm = reduxForm('contactForm', contactValidation)
.async(asyncValidation, 'name', 'phone')(ContactForm);
With that call, the asynchronous validation will be called when either name
or phone
is blurred.
Assuming that they have their onBlur={handleBlur('name')}
properties properly set up.
NOTE! If you only want asynchronous validation, you may leave out the synchronous validation function. And if you only want it to be run on submit, you may leave out the fields, as well.
ContactForm = reduxForm('contactForm').async(asyncValidation)(ContactForm);
The recommended way to submit your form is to create your form component as shown above,
using the handleSubmit
prop, and then pass an onSubmit
prop to your form component.
import React, {Component, PropTypes} from 'redux-form';
import {connect} from 'redux';
import {initialize} from 'redux-form';
class ContactPage extends Component {
static propTypes = {
dispatch: PropTypes.func.isRequired
}
handleSubmit(data) {
console.log('Submission received!', data);
this.props.dispatch(initialize('contactForm', {})); // clear form
}
render() {
return (
<div>
<h1>Contact Information</h1>
<ContactForm onSubmit={this.handleSubmit.bind(this)}/>
</div>
);
}
}
export default connect()(ContactPage); // adds dispatch prop
Or, if you wish to do your submission directly from your decorated form component, you may pass a function
to handleSubmit
. To abbreviate the example shown above:
class ContactForm extends Component {
static propTypes = {
// ...
handleSubmit: PropTypes.func.isRequired
}
saveForm(data) {
// make server call to save the data
}
render() {
const {
// ...
handleSubmit
} = this.props;
return (
<form onSubmit={handleSubmit(this.saveForm)}> // <--- pass saveForm
// ...
</form>
);
}
}
Part of the beauty of the flux architecture is that all the reducers (or "stores", in canonical Flux terminology) receive all the actions, and they can modify their data based on any of them. For example, say you have a login form, and when your login submission fails, you want to clear out the password field. Your login submission is part of another reducer/actions system, but your form can still respond.
Rather than just using the vanilla reducer function generated by createFormReducer()
, you can augment it to do
other things.
import {createFormReducer} from 'redux-form';
import {AUTH_LOGIN_FAIL} from '../actions/actionTypes';
const loginFormReducer = createFormReducer('loginForm', ['email', 'password']);
export default function loginForm(state, action = {}) {
switch (action.type) {
case AUTH_LOGIN_FAIL:
return {
...state,
data: {
...state.data,
password: ''
}
};
default:
return loginFormReducer(state, action);
}
}
Editing multiple records on the same page is trivially easy with redux-form
. All you have to do is to pass a
unique sliceKey
prop into your form element, and initialize the data with initializeWithKey()
instead of initialize()
. Let's say we want to edit many contacts on the same page.
import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {initializeWithKey} from 'redux-form';
import {bindActionCreators} from 'redux';
import ContactForm from './ContactForm';
class ContactsPage extends Component {
static propTypes = {
contacts: PropTypes.array.isRequired,
initializeWithKey: PropTypes.func.isRequired
}
componentWillMount() {
const {contacts, initializeWithKey} = this.props;
contacts.forEach(function (contact) {
initializeWithKey('contactForm', String(contact.id), contact);
});
}
handleSubmit(id, data) {
// send to server
}
render() {
const {contacts} = this.props;
return (
<div>
{contacts.map(function (contact) {
return <ContactForm
key={contact.id} // required by react
sliceKey={String(contact.id)} // required by redux-form
onSubmit={this.handleSubmit.bind(this, contact.id)}/>
})}
</div>
);
}
}
function mapStateToProps(state) {
return { contacts: state.contacts.data };
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ initializeWithKey }, dispatch),
}
// apply connect() to bind it to Redux state
ContactsPage = connect(mapStateToProps, mapDispatchToProps)(ContactsPage);
// export the wrapped component
export default ContactPage;
Each form has a sliceName
. That's the key in the Redux store tree where the data will be mounted.
the name of your form and the key to where your form's state will be mounted in the Redux store
a list of all your fields in your form.
some control over when to mark fields as "touched" in the form:
marks fields to touched when the blur action is fired. defaults to
true
marks fields to touched when the change action is fired. defaults to
false
the name of your form and the key to where your form's state will be mounted in the Redux store
your synchronous validation function. Defaults to
() => ({valid: true})
a function that takes all the form data and returns a Promise that will resolve to an object of validation errors in the form
{ field1: <string>, field2: <string>, valid: <boolean> }
just like the synchronous validation function. See Aynchronous Validation for more details.
field names for which
handleBlur
should trigger a call to theasyncValidate
function
The props passed into your decorated component will be:
a function that may be called to initiate asynchronous validation if asynchronous validation is enabled
true
if the asynchronous validation function has been called but has not yet returned.
The form data, in the form
{ field1: <string>, field2: <string> }
true
if the form data has changed from its initialized values. Opposite ofpristine
.
All the errors, in the form
{ field1: <string>, field2: <string> }
Returns a
handleBlur
function for the field passed.
Returns a
handleChange
function for the field passed.
a function meant to be passed to
<form onSubmit={handleSubmit}>
or to<button onClick={handleSubmit}>
. It will run validation, both sync and async, and, if the form is valid, it will callthis.props.onSubmit(data)
with the contents of the form data.
Optionally, you may also pass your
onSubmit
function tohandleSubmit
which will take the place of theonSubmit
prop. For example:<form onSubmit={handleSubmit(this.save.bind(this))}>
Initializes the form data to the given values. All
dirty
andpristine
state will be determined by comparing the current data with these initialized values.
true
if the form has validation errors. Opposite ofvalid
.
true
if the form data is the same as its initialized values. Opposite ofdirty
.
Resets all the values in the form to the initialized state, making it pristine again.
The same
sliceKey
prop that was passed in. See Editing Multiple Records.
Whether or not your form is currently submitting. This prop will only work if you have passed an
onSubmit
function that returns a promise. It will be true until the promise is resolved or rejected.
Marks the given fields as "touched" to show errors.
the touched flags for each field, in the form
{ field1: <boolean>, field2: <boolean> }
Marks all fields as "touched" to show errors. should be called on form submission.
Clears the "touched" flag for the given fields
Clears the "touched" flag for the all fields
true
if the form passes validation (has no validation errors). Opposite ofinvalid
.
redux-form
exports all of its internal action creators, allowing you complete control to dispatch any action
you wish. However, it is highly recommended that you use the actions passed as props to your component
for most of your needs.
Saves the value and, if you have
touchOnBlur
enabled, marks the field astouched
.
Saves the value and, if you have
touchOnChange
enabled, marks the field astouched
.
Sets the initial values in the form with which future data values will be compared to calculate
dirty
andpristine
. Thedata
parameter should only containString
values.
Used when editing multiple records with the same form component. See Editing Multiple Records.
Resets the values in the form back to the values past in with the most recent
initialize
action.
Flips the
asyncValidating
flagtrue
.
Flips the
asyncValidating
flagfalse
and populatesasyncErrors
.
Marks all the fields passed in as
touched
.
Marks all the fields in the form as
touched
.
Resets the 'touched' flag for all the fields passed in.
Resets the 'touched' flag for all the fields in the form.
Check out the
react-redux-universal-hot-example project to see
redux-form
in action.
This is an extremely young library, so the API may change. Comments and feedback welcome.