如何在非reduxForm组件/Redux状态中获取reduxForm的pristine属性？

Hey there! I’ve run into this exact snag before working with redux-form, so I totally get how frustrating it is when you can’t access that pristine/dirty state outside your wrapped form component. Let’s walk through a few reliable solutions to fix this:

1. 用redux-form内置选择器直接从Redux Store读取状态 #

Redux-form stores all form state in your Redux store under the form key, so you can use its built-in selectors to pull pristine/dirty values into any component connected to Redux.

Here’s how to do it:

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

// 你的非表单组件
const MyNonFormComponent = ({ isMyFormPristine, isMyFormDirty }) => {
  return (
    <div>
      {isMyFormPristine ? "表单还没被修改过" : "表单已经被修改"}
    </div>
  );
};

// 映射Redux状态到组件props
const mapStateToProps = state => ({
  // 替换成你的表单名称（就是reduxForm({ form: 'xxx' })里的xxx）
  isMyFormPristine: isPristine('yourFormName')(state),
  isMyFormDirty: isDirty('yourFormName')(state)
});

export default connect(mapStateToProps)(MyNonFormComponent);

This is the most straightforward approach because it leverages redux-form’s own state management without extra work.

2. 同步表单状态到你自己的Redux Slice #

If you want to keep this state in your custom Redux store (instead of relying on redux-form’s slice), you can listen for changes to pristine in your wrapped form component and dispatch an action to update your own state.

Example code:

import { reduxForm } from 'redux-form';
import { updateFormPristineStatus } from './yourCustomActions';

const YourForm = ({ pristine, dispatch }) => {
  // 每当pristine状态变化时，同步到自定义Redux状态
  React.useEffect(() => {
    dispatch(updateFormPristineStatus(pristine));
  }, [pristine, dispatch]);

  return (
    <form>
      <Field name="email" component={TextField} label="邮箱" />
      <Field name="password" component={TextField} label="密码" type="password" />
      {/* 其他表单字段 */}
    </form>
  );
};

export default reduxForm({ form: 'yourFormName' })(YourForm);

Then, in your custom reducer, handle the updateFormPristineStatus action to store the value. Any component can then connect to your custom state to access the pristine value.

3. 父组件中转状态（仅限同层级组件场景） #

If your non-form component is a child of the same parent as your form, you can pass the pristine state down via props. Just make sure you’re accessing it from the wrapped form component:

// 父组件
const ParentContainer = () => {
  const [formPristine, setFormPristine] = React.useState(true);

  // 用ref获取表单组件的props
  const formRef = React.useRef(null);

  // 监听表单组件的props变化
  React.useEffect(() => {
    if (formRef.current) {
      setFormPristine(formRef.current.props.pristine);
    }
  }, [formRef.current?.props.pristine]);

  return (
    <div>
      <YourFormComponent ref={formRef} />
      <MyNonFormComponent isFormPristine={formPristine} />
    </div>
  );
};

Note: This method is less reliable than the first two, as redux-form’s prop updates might not always trigger the ref check immediately. Stick with the selector or custom Redux sync methods for consistency.

Why passing pristine to Field didn’t work #

The Field component is designed to handle individual form field configuration, not global form state like pristine. That state belongs to the entire form, not a single input, so passing it to Field won’t have any effect—Field ignores props that aren’t related to the specific field it’s rendering.

内容的提问来源于stack exchange，提问作者Eduard