Uzyskiwanie wartości redux-form w zdarzeniu onChange

Question

Jaki jest poprawny sposób pobierania wartości z formularza zarządzanego przez redux-form po każdej aktualizacji formularza? Muszę wysłać akcję za każdym razem, gdy zmienia się formularz, używając wartości wprowadzonych do formularza.

Moje obecne rozwiązanie pobiera stare wartości zamiast tych, które zostały właśnie zaktualizowane.

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

Moje inne rozwiązanie to jest, ale nie wiem na ile wiarygodne jest:

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

Answer 1

Z Redux-forma 6, można uzyskać wartości za pomocą formValueSelector:

import { formValueSelector } from 'redux-form'; 

const selector = formValueSelector('myFormName'); 

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

Teraz możesz porównać bieżące wartości i poprzednie wartości w 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 
    } 
} 

Za pomocą formularza redux do wersji 6, nie trzeba używać formValueSelector jako formy redux, automatycznie dodając valuesprop do swojej ozdobionej postaci.