Redux form sends outdated data on second submit

Question

I have a page with multiple dropdowns and each dropdown sends different data to server.

<form onSubmit={handleSubmit(submitMember)}>
  <DropDown />
  <button type="submit">Apply changes</button>
  <DropDown />
  <button type="submit">Apply changes</button>
</form>


const mapStateToProps = (state, ownProps) => ({
  member: getFormValues(`${ownProps.form}`)(state)
})

export default connect(mapStateToProps)(reduxForm({ enableReinitialize: true })(MemberRow))

When I submit first time everything works correctly. But when I submit second time form sends outdated data from first submit. I checked redux storage and data here is updated.

Answer 1

Adding keepDirtyOnReinitialize: true solved the issue.

export default connect(mapStateToProps)(reduxForm({ enableReinitialize: true, keepDirtyOnReinitialize: true })(MemberRow))

From docs:

keepDirtyOnReinitialize : boolean [optional]

When set to true and enableReinitialize is also set, the form will retain the value of dirty fields when reinitializing. When this option is not set (the default), reinitializing the form replaces all field values. This option is useful in situations where the form has live updates or continues to be editable after form submission; it prevents reinitialization from overwriting user changes. Defaults to false.