如何阻止redux-form销毁/更新？或排查其destroy事件触发根源

Alright, let's tackle your redux-form destroy issue and the post-submit update block. Here are actionable solutions for both of your requirements:

The @@redux-form/DESTROY action typically fires in a few specific scenarios—let's break down how to trace the exact source:

• Leverage Redux DevTools' Context: Use the "Jump to Action" feature to go directly to the DESTROY event, then look at the actions immediately before it. Common triggers include:
  • A parent component unmounting (check if your form is wrapped in conditional rendering that hides/unmounts it)
  • A change to the form component's key prop (if the key updates, React will re-mount the component, triggering redux-form's destroy logic)
• Check Redux-Form Configuration: The default destroyOnUnmount prop is true, which means the form is destroyed when the component unmounts. Temporarily set this to false to see if the issue goes away—if it does, your problem is definitely related to component unmounting.
• Trace the Call Stack with a Custom Middleware: Add a simple Redux middleware to log the call stack whenever the DESTROY action fires. This will show you exactly which part of your code (or dependency) is triggering it:

  const destroyTraceMiddleware = store => next => action => {
    if (action.type === '@@redux-form/DESTROY') {
      console.log('DESTROY action triggered for form:', action.meta.form);
      console.trace(); // This will print the full call stack to find the source
    }
    return next(action);
  };
  

  Add this middleware to your Redux store setup, then check the browser console when the issue occurs.
• Search for Manual Destroy Calls: Scan your codebase for any explicit calls to destroy(formName) (from redux-form's exported actions) or any usage of the destroy prop in your reduxForm HOC configuration.

If you need to prevent any form changes after the user clicks submit, here are a few reliable approaches:

• Disable All Fields Post-Submit: Track a isSubmitted state in your component, then pass disabled={isSubmitted} to every form field. This prevents user input and stops redux-form from receiving update events:

  class MyForm extends React.Component {
    state = { isSubmitted: false };
  
    handleSubmit = values => {
      this.setState({ isSubmitted: true });
      // Your submit logic here
    };
  
    render() {
      const { isSubmitted } = this.state;
      return (
        <form onSubmit={this.props.handleSubmit(this.handleSubmit)}>
          <Field name="email" component="input" type="email" disabled={isSubmitted} />
          <button type="submit" disabled={isSubmitted}>Submit</button>
        </form>
      );
    }
  }
  

• Block Redux-Form Update Actions with Middleware: Create a middleware that intercepts redux-form's update actions (like @@redux-form/CHANGE, @@redux-form/BLUR) after the form has been submitted:

  const blockPostSubmitUpdates = store => next => action => {
    const formState = store.getState().form.yourFormName; // Replace with your form's name
    if (formState?.submitted && action.type.startsWith('@@redux-form/') && !action.type.includes('DESTROY')) {
      console.log('Blocking form update action:', action);
      return; // Stop the action from reaching the reducer
    }
    return next(action);
  };
  

• Use Redux-Form's submitted State: Redux-form automatically sets a submitted flag in the form state after a successful submit. You can use this to conditionally disable fields or prevent further updates directly in your form component logic.

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