Access a Field value with Redux-form - dependent Fields

Question

I have a decorated component with redux-form HOC and I want to access a Field value from the decorated component to enable/disable and hide/show other fields. what's the best approach to do that?

I tried to use Fields component to operate in the dependent fields but that hurts the performance of the decorated component as it provokes useless re-renders

It is also possible to connect the decorated component with redux and use formValueSelector that is provided by redux-form, but I wonder if there is a better approach to access a field(s) value.

Answer 1

Form Selectors and Field-dependent Values is described here. The solution is based on 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)
);

and in your formComponent you can get the formValues from the props:

export const FormComponent = ({ handleSubmit, onSubmit, formValues }) => {
}