redux form remounted whenever react-intl update action is fired

Question

I have my app and redux form living inside IntlProvider component like that:

<IntlProvider>
    <Form />
</IntlProvider>

the problem is that whenever I try to change the locale value by callingupdateIntl action to change the application language, redux form component is being remounted again and resetting all the state and props in form.

i am using react-intl-redux to call updateIntl like that:

dispatch(updateIntl({ locale: value, messages: translations[value] }))

and those are the actions that are being fired when changing IntlProvider locale value:

@@intl/UPDATE // here I still have the old state which is the form fields values
@@redux-form/INITIALIZE // here the state starts to reset
@@redux-form/UPDATE_SYNC_ERRORS
@@redux-form/DESTROY
@@redux-form/REGISTER_FIELD

when setting destroyOnUnmount to true like that:

reduxForm({
    form: 'someForm',
    destroyOnUnmount: false,
})

the form state is not being reset but this does not my problem because I need destroyOnUnmount to be set to true since i have react router connected and I need the form to be initialized when moving between routes.

I tried to wrap my form to a reducer plugin based on this solution but I am still not able to prevent redux-form actions from being called after @@intl/UPDATE is called.

score 1 · Accepted Answer · answered May 14 '19 at 08:06

I solved it by a workaround solution, first I set destroyOnUnmount to false and I added new redux action to the plugin api so the form is no longer being initialized on mount

here is the new action where I want to initialize my form:

store.dispatch({
  type: 'INITIALIZE_MY_CUSTOM_FORM',
});

and in my store configuration:

const formReducerPlugin = formReducer.plugin({
  customForm: (state, action) => {
    switch(action.type) {
      case 'INITIALIZE_MY_CUSTOM_FORM':
        return {}
      default:
        return state
    }
   }
})


const rootReducers = combineReducers({
  ...reducers,
  form: formReducerPlugin,
});

and my form configuration like that:

reduxForm({
    form: 'customForm',
    destroyOnUnmount: false,
})

redux form remounted whenever react-intl update action is fired

1 Answers1