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...

I probably guess that the initialValues doesn't work because the component is initialised and then you get the value that you want to update the field with.Now since you need to update state of the redux-form field programatically, you can have a look at this answer https://stackoverflow.com/questions/45230531/how-to-programatically-set-redux-form-field-value/45231071#45231071 — Shubham Khatri, Nov 12 '17 at 15:23
@ShubhamKhatri thanks for your answer. I'll try it out tomorrow :) — codelifter, Nov 13 '17 at 21:22

Ivan Semochkin · Accepted Answer · 2017-11-12T15:33:23.117

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:

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.

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)
})

Hey ivan, thanks! That solved my problem!! I appreciate it. – codelifter Nov 13 '17 at 21:43 — codelifter, Nov 13 '17 at 21:43

reduxForm - initialValues did not apply after update

1 Answers1