reduxForm - initialValues did not apply after update

Question

I use Redux Form Version 6.8.0.

I have a form component which get's it's "initialValues" via a "mapStateToProps" function. On the first render everything works quite fine.

Following my form config:

const CategoryChangeForm = reduxForm({
  form: 'change-category',
  validate: newCategoryValidate,
  enableReinitialize: true
})(CategoryChange);

When i change the Field "category" and the update succeed, i receive the new updated value from firebase. I pass this updated value via the mentioned "mapStateToProps" function to the "initialValues":

function mapStateToProps(state, ownProps) {
    return {
    initialValues: { category: state.categories[ownProps.id].name, id: ownProps.id }
  };
}

I expected that the new Value would be applied to the "category"-Field Component. But it doesn't get the updated value.

The config of my "Field" Components:

const fieldProps = {
  category: {
    name: 'category',
    type: 'text',
    placeholder: 'Bezeichnung',
    component: InputField
  },
  hidden: {
    name: 'id',
    type: 'hidden',
    component: 'input'
  }
};

and here is my Form Component:

export const CategoryChange = props => {
  const {
    color,
    message,
    handleSubmit,
    stateComponent
  } = props;

  console.log("Props: ", props);

  return (
    <span>
      <Subline color={ color } marginTop={ 70 } marginBottom={ 30 } align="center">{ message }</Subline>
      <form>
        <Field { ...fieldProps.category } />
        <Field { ...fieldProps.hidden } />
        <Button onClick={ handleSubmit(changeCategory.bind(stateComponent)) }>Ändern</Button>
        <Button marginBottom={ 5 } marginTop={ 10 }>Löschen</Button>
      </form>
    </span>
  );
}

I can observe that after an update, my form component rerenders 2 times. First time its prop "initialized" is set to "true". But the second time its set to "false". The second render occurs due to a stateChange of the hoc component which wrapped my form component. The "setState" for the hoc is triggered when the update was successful and show an appropriate message to the user. But cause of the second render the form component did not initialize.

If you need any more code to see, let me know.

Hope someone has a hint to solve this problem...

Answer 1

According to the docs:

By default, you may only initialize a form component once via initialValues. There are two methods to reinitialize the form component with new "pristine" values:

1. Pass a enableReinitialize prop or reduxForm() config parameter set to true to allow the form the reinitialize with new "pristine" values every time the initialValues prop changes. To keep dirty form values when it reinitializes, you can set keepDirtyOnReinitialize to true. By default, reinitializing the form replaces all dirty values with "pristine" values.

2. Dispatch the INITIALIZE action (using the action creator provided by redux-form).

You can change CategoryChangeForm from function to class and call initialize action from redux-forms in the componentWillReceiveProps method.

import {initialize} from 'redux-form'

CategoryChangeForm extends Component {
     ...
     componentWillReceiveProps(nextProps) {
       // check the props and call initialize when needed
     } 
}

mapDispatchToProps = dispatch =>  ({
    initialize: (data) => initialize('change-category', data)
})