v3.0.0 represents a major rewrite of redux-form with special attention paid to unit testing and documentation. Despite the fact that the innards were mostly gutted, effort was made to change the API as little as possible to make migration from v2.x.x much easier.
New Website!!
The official home on the web for redux-form is now erikras.github.io/redux-form. All documentation lives there now, as well as some gorgeous functioning live examples. The whole site is a React app that can be cloned and run locally for educational purposes. PRs for new examples welcome.
Migration Guide
connectReduxForm --> reduxForm
The difference between reduxForm() and connectReduxForm() in v2.x.x has gone away.
If you were mounting your reducer to somewhere other than form, you can still do that.
v2.x.x
ContactForm = connectReduxForm({
form: 'contact',
fields: ['name', 'address', 'phone']
})(ContactForm);v3.0.0
ContactForm = reduxForm({ // <--- only change
form: 'contact',
fields: ['name', 'address', 'phone']
})(ContactForm);The only valid response from synchronous validation is {}
Previous versions of redux-form allowed you to return {valid: true}, but that no longer applies in v3.
Config parameters == props passed to decorated component
This is not so much something that requires a migration change, but you should be aware of it. Anything that you pass in the config object to reduxForm() can be passed as a prop to the resulting decorated component and vice versa.
State destroyed on componentWillUnmount by default
To save memory, your form's state is now automatically removed from the Redux state when your component unmounts. If you do not want this behavior (e.g. maybe you want to be able to navigate away from your form and come back to it with its data intact), there is a destroyOnUnmount config parameter (and prop, see above) that can be set to false to disable this behavior.
The formName prop is now form
Due to the note above about consolidating config parameters and props. The formName prop got renamed to match its config param equivalent form.
v2.x.x
<ContactForm formName="clientContact"/>v3.x.x
<ContactForm form="clientContact"/>Async Validation must reject if there are errors
This makes more sense than allowing resolve(errors).
v2.x.x
function validateContactAsync(data, dispatch) {
return new Promise((resolve, reject) => {
const errors = {};
let valid = true;
// do async validation
resolve(errors);
});
}v3.0.0
function validateContactAsync(data, dispatch) {
return new Promise((resolve, reject) => {
const errors = {};
let valid = true;
// do async validation, which sets values in errors and flips valid flag
if(valid) {
resolve();
} else {
reject(errors);
}
});
}Mutator actions are only under fields now
This should not effect you unless you have code that has not been updated since before v0.6.0. handleBlur, handleChange, and handleFocus will no longer be provided as props.
v2.x.x
| v3.0.0
|
|---|---|
this.props.handleBlur('name')
| this.props.fields.name.onBlur
|
this.props.handleBlur('name', 'value')
| this.props.fields.name.onBlur('value')
|
this.props.handleChange('name')
| this.props.fields.name.onChange
|
this.props.handleChange('name', 'value')
| this.props.fields.name.onChange('value')
|
this.props.handleFocus('name')
| this.props.fields.name.onFocus
|