Tengo un componente decorado con redux-form HOC y quiero acceder a un valor de campo desde el componente decorado para habilitar/deshabilitar y ocultar/mostrar otros campos. ¿Cuál es el mejor enfoque para hacer eso?
Traté de usar el componente Fields para operar en los campos dependientes, pero eso perjudica el rendimiento del componente decorado, ya que provoca re-renderizaciones inútiles.
También es posible conectar el componente decorado con redux y usar formValueSelector proporcionado por redux-form , pero me pregunto si hay un mejor enfoque para acceder a un valor de campo.
Los selectores de formulario y los valores dependientes de campo se describen aquí . La solución se basa en getFormValues :
import React from 'react'; import { connect } from 'react-redux'; import { reduxForm, getFormValues } from 'redux-form'; import FormComponent from './form.component'; export const FormContainer = props => { const submitForm = (formValues) => { console.log('submitting Form: ', formValues); } return ( <FormComponent formValues={props.formValues} change={props.change} onSubmit={submitForm} handleSubmit={props.handleSubmit} /> ); } const mapStateToProps = state => ({ formValues: getFormValues('my-very-own-form')(state), }); const formConfiguration = { form: 'my-very-own-form', } export default connect(mapStateToProps)( reduxForm(formConfiguration)(FormContainer) );y en su componente de formulario puede obtener los valores de formulario de los accesorios:
export const FormComponent = ({ handleSubmit, onSubmit, formValues }) => { }