Redux Form - initialValues not updating with state
To pre-fill a redux-form
form with data from a resource, you would use the initialValues
prop which is read automatically when decorating the component/container with the reduxForm
connector. It's important that the keys in the initialValues
match the name
on the form fields.
Note: It is necessary to first apply the reduxForm()
decorator, and then the connect()
from redux. It will not work the other way around.
Using redux-form 7.2.3:
const connectedReduxForm = reduxForm({
form: 'someUniqueFormId',
// resets the values every time the state changes
// use only if you need to re-populate when the state changes
//enableReinitialize : true
})(UserForm);
export default connect(
(state) => {
// map state to props
// important: initialValues prop will be read by redux-form
// the keys must match the `name` property of the each form field
initialValues: state.user
},
{ fetchUser } // map dispatch to props
)(connectedReduxForm)
From the official documentation:
Values provided to the initialValues prop or reduxForm() config parameter will be loaded into the form state and treated thereafter as "pristine". They will also be the values that will be returned to when reset() is dispatched. In addition to saving the "pristine" values, initializing your form will overwrite any existing values.
Find more information and a complete example in the official documentation
I was facing the same problem after update to redux-form v6.0.0-rc.4.
I solved setting enableReinitialize to true
UsersShowForm = reduxForm({
form: 'UsersShowForm',
enableReinitialize: true
})(UsersShowForm)