How to access pristine prop of reduxForm from inside the Redux state?

Question

I use multiple instances of redux-form's Field inside my form with TextField of redux-form-material-ui as a renderable component:

<Field
     component={TextField}
     floatingLabelText='Title:'
     name='title'
/>

When a component that the form resides in is being wrapped with reduxForm(), we get props.pristine, props.dirty etc inside this component.

However, I want to perform some action, depending on the value of pristine, in another non-reduxForm component OR Redux state, but I am unable to do so.

I tried passing it as a prop to Field:

<Field
    component={TextField}
    floatingLabelText='Title:'
    name='title'
    pristine={props.pristine}
/>

But pristine property still does not appear neither as a prop inside state.form.formName, nor as a prop inside state.form.formName.registeredFields.title:

Question:
Is there a way to get pristine property of my form inside another component or inside redux state?

Answer 1

Update: Upgrading to 7.4.2. solves the problem!

import { connect } from 'react-redux';
import { isPristine } from 'redux-form'

What you need to do: connect to the redux-form-state and access it

const mapStateToProps = state => ({
  isPristine: isPristine('yourFormName')(state), // Checks whole form
  isPristine: isPristine('yourFormName')(state, ["fieldName"]), // Checks particular field
}); connect(mapStateToProps)

You can access it with this.props.isDirty and pass it to the desired component.

Answer 2

Handling this from middleware would probably make of the easiest implementation of checking the state between forms, checking against the form.config.values, and form.config.initialValues when there is a redux-form change.

const formMiddleware = () => store => next => action => {
  const state = store.getState()
  switch(action.type) {
    case '@@redux-form/CHANGE':
      store.dispatch({ type: UPDATE_OTHER_FORM, message: Object.is(state.form.config.values, state.form.config.initial) });
      break;
  }
  next(action)
}

An alternative option (based on use-case) is to handle your form via the state of pristine, and change the call based on the status of a prop, and pass that on:

<Button
  btnName={pristine ? "Action1" : "Action2"}
  type="submit"
  action={props.handleSubmit(values => {
    onSubmit(
      pristine ?
      {
        ...values,
        call: 'action1'
      } : {
        ...values,
        call: 'action2'
      }
    )
  })}
/>

Then in your root component, you can pass a method, in this case "handleSubmit" to your form's handleSubmit prop, which will then watch for incoming form submissions to decide what action to call based on the values. e.g.

handleSubmit = (values) => {
  if(values.call === 'action1') { 
    this.props.actions.action1(values);
  } else if(values.call === 'action2') {
    this.props.actions.action2(values);
  }
}

Hope that helps in your particular implementation, even though you are looking for ways to bring the pristine state outside of the form. You can also link the state through these to other forms as well, but when I looked into this last year, pushing the state outside of the form simply wasn't possible.

Answer 3

To access the prestine prop inside another component:

If you use Class based component:

Import all necessary stuff:

Import { connect } from "react-redux"; 
Import { isPristine } from "redux-form";

Inside your mapStateToProps function:

const mapStateToProps = state => ({
  pristine: isPristine('yourFormName')(state), // Checks whole form
  pristineField: isPristine('yourFormName')(state, ["fieldName"]), // Checks particular field
}); 

connect(mapStateToProps, mapDispatchToProps)(YourFormComponent)

If you use Functional based component:

Import all necessary stuff:

import { useSelector } from "react-redux";
import { isPristine } from "redux-form";

Inside the functional component:

const pristine = useSelector((state) => isPristine("formName")(state));

You can see all available selectors that redux-form provides here