Using enableReinitialize & keepDirtyOnReinitialize => INITIALIZE with keepDirty: undefined

I run into problems using enableReinitialize and keepDirtyOnReinitialize, when using initialValues over state mapping. I need initialValues depending on other values, they can change, so static initialValues at ReduxForm property was not the solution.

The goal was that the form reset leads to the initial values set by state mapping and untouched fields are set to the new defaults if state changes.

class UserForm extends Component {
 ...
}

const mapStateToProps = (state, props) => {
  return {    
    initialValues: state.reducer.defaults,    
  }
};

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators({ ...Actions, ...WizardActions }, dispatch),
  dispatch
});

let UserReduxForm = reduxForm({
  form: formId,
  destroyOnUnmount: false,
  enableReinitialize: true, 
  keepDirtyOnReinitialize: true
})(UserForm);

UserReduxForm = connect(
  mapStateToProps,
  mapDispatchToProps
)(UserReduxForm);

export default UserReduxForm;

If enableReinitialize is true, a reopening of the component leads to a redux-form/INITIALIZE action with meta property keepDirty: undefined, causing all dirty / touched fields to be resetted.

After some investigation I found for me a workaround:

class UserForm extends Component {

componentWillReceiveProps(nextProps) {
    const {  defaultValues, formInitialValues } = nextProps;
    const { dispatch  } = this.props;
    
    if (JSON.stringify(defaultValues) !== JSON.stringify(formInitialValues)) {
      dispatch(initialize(formId, defaultValues, true));
    }
  }

 ...
}

const mapStateToProps = (state, props) => {
  return {    
    defaultValues: state.reducer.defaults,
    formInitialValues: (state.form[formId]&&state.form[formId].initial?state.form[formId].initial:{}),
  }
};

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators({ ...Actions, ...WizardActions }, dispatch),
  dispatch
});

let UserReduxForm = reduxForm({
  form: formId,
  destroyOnUnmount: false,
  //enableReinitialize: true, 
  keepDirtyOnReinitialize: true
})(UserForm);

UserReduxForm = connect(
  mapStateToProps,
  mapDispatchToProps
)(UserReduxForm);

export default UserReduxForm;

It seems to me that keepDirtyOnReinitialize is not evaluated when enableReinitialize is enabled? Manually dispatching via dispatch(initialize(formId, defaultValues, true)); with keepDirty value set to true leads to a redux-form/INITIALIZE action with meta.keepDirty: true and all works fine.

Does I anything misunderstand using state mapping to initialValues?

[laurasilvani]

I am experiencing the same issue as ifranke, a reopening of the component causes the dirty values to be resetted to initialValues.

Here is my code:

const mapStateToProps = store => ({
  initialValues: store.evaluations.info.data,
})

const mapDispatchToProps = (dispatch) => ({
  fetchEvaluation: (val) => dispatch(fetchEvaluation(val)),
  initializeForm: (formName) => dispatch(initialize(formName))
})

class InfoFunc extends Component {
   ...

    componentWillMount(){
    if (parseInt(this.props.id, 10) !== 0) { // Load evalution data
      this.props.fetchEvaluation(this.props.id)
      this.props.initializeForm('evaluationInfo', this.props.initialValues)
    } else {
      this.props.initializeForm('evaluationInfo', {})
    }
  }
}

let InfoForm = reduxForm({
  form: 'evaluationInfo',
  destroyOnUnmount: false,
  enableReinitialize: true,
  keepDirtyOnReinitialize: true
})(InfoFunc)

InfoForm = connect(
  state => ({
    initialValues: state.evaluations.info.data
  })
)(InfoForm)

export default (connect(mapStateToProps, mapDispatchToProps)(InfoForm));

[mgh]

@ifranke I ran into this same issue, but when I forked the repo to fix it, the problem went away. The relevant line adding the missing parameter to initialize is here: https://github.com/erikras/redux-form/commit/0ef019cf994da676f7b8997f95868db3166ced55#diff-d749bb1257f721af37259e0346e623beL135

I’m guessing we are just waiting for a new release to fix this!