Fix hot reloading destroying form

[tyscorp]

This PR only destroys the form on unmount when there is not a hot reload in progress. This is currently webpack HMR specific.

A similar fix was suggested in #947 but this PR fixes the behavior only during a hot update, not in the presence of hot reloading capabilities. @gaearon suggested not to do this but since react-hot-loader@3.x seems dead and this issue has been around for a while with redux-form and is very frustrating to deal with I think it is worth fixing it with this workaround.

There are some flow errors that I'm really not sure how to fix. I also don't know how to create tests that are useful since it requires overriding the global module.

Fixes #623
Fixes #2826
Fixes #3005.

[tyscorp]

In case this doesn't get merged, here is a little (super ugly) snippet to use instead of the reduxForm decorator to monkey-patch the behavior:

import React from 'react';
import { reduxForm } from 'redux-form';

const isHotReloading = () => !!(
  typeof module !== 'undefined' &&
  module.hot &&
  typeof module.hot.status === 'function' &&
  module.hot.status() === 'apply'
);

export default function reduxFormPatch(config) {
  if (!module.hot) {
    return reduxForm(config);
  }

  return (BaseComponent) => {
    const WrappedComponent = reduxForm(config)(BaseComponent);

    return class extends WrappedComponent {
      componentDidMount() {
        const Form = Object.getPrototypeOf(this.ref.wrappedInstance);

        const componentWillUnmount = Form.componentWillUnmount;

        Form.componentWillUnmount = function () {
          if (!isHotReloading()) {
            return componentWillUnmount.apply(this);
          }
        };

        if (super.componentDidMount) {
          super.componentDidMount();
        }
      }
    }
  };
}

[erikras]

Wow, I'm so glad I didn't go through with my complicated way I was tackling this problem. This is so much simpler. I'll look into the flow errors and merge asap.

[erikras]

@tyscorp You did it right in the snippet you shared. The expression needed a !! to guarantee that it was a boolean.

[codecov-io]

Codecov Report

Merging #3506 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff           @@
##           master   #3506   +/-   ##
======================================
  Coverage     100%    100%           
======================================
  Files          69      70    +1     
  Lines        1537    1540    +3     
======================================
+ Hits         1537    1540    +3

Impacted Files	Coverage Δ
src/util/isHotReloading.js	100% <100%> (ø)
src/createReduxForm.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 59a8977...820843b. Read the comment docs.

[erikras]

Published in v7.1.2.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.