redux-form: Using keepDirtyOnReinitialize fails to update fields on successful submit

Version 6.4.3

My form is a FieldArray of notifications that can be removed with the trash can icon, as seen below. There is also a cancel button that resets the form.

image

The form’s initial values come from a list of notifications from the server. I need to use keepDirtyOnReinitialize, because otherwise, if I destroy a saved notification and then click the cancel button, the destroyed notification will reappear.

While using keepDirtyOnReinitialize fixes this, it causes a new problem: when I add a new notification to the form and submit, the id field for the newly created notification does not get updated on reinitialize.

The payload for the INITIALIZE action does look correct, as you can see below.

image

The payload contains the id, so I expect that my hidden input will be updated, but as you can see below, the input has no value.

image

Therefore, if I click the trash can icon to destroy that item, the id is not present so the destroy call is never made:

const renderNotification = (member, index, fields, destroy) => {
  const remove = () => {
    const { id } = fields.get(index);

    if (id) {
      destroy(id);
    }

    fields.remove(index);
  };

If I turn keepDirtyOnReinitialize back to false, then my id fields update as expected, but as I stated earlier, I need this flag to be true so that resetting the form does not revive destroyed items.

I can’t link to the repo and it might be too much to post all of the code, so let me know if there are specific areas you’d like to see. It would take some effort to create a smaller, shareable example that reproduces this.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 16 (1 by maintainers)

Most upvoted comments

As posted above:

const renderNotification = (member, index, fields, destroy) => {
  const remove = () => {
    const { id } = fields.get(index);

    if (id) {
      destroy(id);
    }

    fields.remove(index);
  };

The destroy(id) call is an action creator that deletes the item from the server. Now that I review that action creator, however, I see that it’s not removing the notification from the store. I updated that and it seems to work now. Can’t believe I missed it before. Of course I feel silly now.

Thanks so much for talking through this with me and leading me to my error!