redux-form is Destroying my state once the component is unmounted, what gives?

Question

I am not passing in any special config settings nor am I setting/or calling Destroy... but my state is being cleaned... anyway to prevent this? I need the state to stick around as I need that data thruout my application.

prev state: I see it in there... via redux-logger
action: redux-form/Destroy
next state: it's gone.

Answer 1

The form's state subtree is destroyed when the form is unmounted, by design. This is the default and expected behaviour.

From v6.2.1 onwards there is a form config property destroyOnUnmount, which explicitly enables/disables the state-clearing behaviour on a specific form (docs here)

import { reduxForm } from 'redux-form';

reduxForm({
  form: 'example',
  destroyOnUnmount: false
})(...)

This is useful when you have a form whose state you wish to preserve if the user abandons it halfway though, navigates away, and then returns later.

Answer 2

You are probably merging redux-forms's state into yours, you should have it under separate key. Destroy action returns undefined, which is okay, if the redux-forms reducer only manages it's part of the store.

Make sure you're following step #1 in this tutorial, specially the form: formReducer part : https://redux-form.com/7.2.3/docs/gettingstarted.md/#step-1-of-4-form-reducer

Answer 3

I ran into this same issue personally using Redux Form recently

Where after dispatching an action and going through the reducer, redux-form dispatch DESTROY action. Brennan Cheung comment helped me realize that the state I was returning/modifying in my reducer had missing information that was sent back to the store. After I fixed this, redux form doesn't dispatch the destroy action automatically anymore.

For example: Initially, I was returning this:

    [
      {
        "id": "dd8684f0-8a8a-11e7-97ac-8350cad5200c",
        "timestamp": 1503771468479,
        "body": "comment2",
        "author": "author2",
        "parentId": "ee6a6c5c-1821-4280-80b7-90fa97137137",
        "voteScore": 1,
        "deleted": false,
        "parentDeleted": false
      }
    ]

When I actually meant to return this

    {
      "ee6a6c5c-1821-4280-80b7-90fa97137137": {
        "id": "ee6a6c5c-1821-4280-80b7-90fa97137137",
        "timestamp": 1502253747021,
        "title": "this is a title",
        "body": "this is another body",
        "author": "author2",
        "category": "category1",
        "voteScore": 2,
        "deleted": false,
        "comments": [
          {
            "id": "dd8684f0-8a8a-11e7-97ac-8350cad5200c",
            "timestamp": 1503771468479,
            "body": "comment2",
            "author": "author2",
            "parentId": "ee6a6c5c-1821-4280-80b7-90fa97137137",
            "voteScore": 1,
            "deleted": false,
            "parentDeleted": false
          }
        ]
      }
    }

So definitely check what state you're returning to the store. Hope this help!