Retrieving Reduction Form Values ​​in the onChange Event

Question

What is the correct way to get values ​​from a form controlled by redux-form after each form update? I need to submit an action every time the form changes using the values ​​entered into the form.

My current solution gets the old values, not the ones that have just been updated.

  onFormChange(e) { const { fieldValue1, fieldValue2, fieldValue3 } = this.props.fields; console.log(fieldValue1.value, fieldValue2.value, fieldValue3.value); } render() { return ( <form onChange={this.onFormChange}> // inputs here </form> ); } 

My other solution is this, but I don't know how reliable it is:

  onFormChange(e) { console.log(e); setTimeout(() => { const { fieldValue1, fieldValue2, fieldValue3 } = this.props.fields; console.log(fieldValue1.value, fieldValue2.value, fieldValue3.value); }, 0); } 

Answer 1

With shorthand form 6, you can get values ​​using formValueSelector :

 import { formValueSelector } from 'redux-form'; const selector = formValueSelector('myFormName'); connect( state => ({ values: selector(state, 'fieldValue1', 'fieldValue2', 'fieldValue3'); }) )(MyFormComponent); 

Now you can compare current values ​​and previous values ​​in componentWillReceiveProps :

 componentWillReceiveProps(nextProps) { const nextValues = nextProps.values; const values = this.props.values; // if at least one of the form values changed if(Object.keys(nextValue).some((key) => nextValues[key] !== values[key])) { console.log(nextProps.values); // do something with values } } 

Using the reduction form prior to version 6, you do not need to use formValueSelector as a reduction form, add the values prop automatically to your formatted form.