javascript - Získávání hodnot redux-form při události onChange

Jaký je správný způsob, jak získat hodnoty z formuláře spravovaného redux-form po každé aktualizaci formuláře? Potřebuji odeslat akci pokaždé, když se formulář změní, s využitím hodnot zadaných do formuláře.

Moje současné řešení získává staré hodnoty, místo těch, které byly právě aktualizovány.

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

Mé jiné řešení je toto, ale nevím, jak je spolehlivé:

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

Odpověď č. 1

S redux-form 6 můžete získat hodnoty pomocí formValueSelector:

import { formValueSelector } from 'redux-form';

const selector = formValueSelector('myFormName');

connect(
  state => ({
      values: selector(state, 'fieldValue1', 'fieldValue2', 'fieldValue3');
  })
)(MyFormComponent);

Nyní můžete porovnat aktuální hodnoty a předchozí hodnoty v componentWillReceiveProps:

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

Při používání redux-form do verze 6 nemusíte používat formValueSelector, protože redux-form automaticky přidává vlastnost values do vašeho dekorovaného formuláře.