избыточная форма перемонтируется всякий раз, когда запускается действие обновления react-intl

У меня есть приложение и редукционная форма, живущие внутри компонента IntlProvider, например:

<IntlProvider>
    <Form />
</IntlProvider>

проблема в том, что всякий раз, когда я пытаюсь изменить значение локали, вызывая действиеupdateIntl для изменения языка приложения, компонент формы редуктора снова монтируется и сбрасывает все состояние и реквизиты в форме.

я использую react-intl-redux для вызова updateIntl следующим образом:

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

и это действия, которые запускаются при изменении значения локали IntlProvider:

@@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

при установке для destroyOnUnmount значения true следующим образом:

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

состояние формы не сбрасывается, но это не моя проблема, потому что мне нужно, чтобы для destroyOnUnmount было установлено значение true, так как у меня подключен реагирующий маршрутизатор, и мне нужно инициализировать форму при перемещении между маршрутами.

Я попытался обернуть свою форму в плагин-редуктор на основе этого решения, но я все еще не могу предотвратить действия с редукционной формой от вызова после вызова @@intl/UPDATE.


reactjs redux redux-form react-intl
person Mohammad altenji    schedule 13.05.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я решил это обходным решением, сначала я установил для destroyOnUnmount значение false и добавил новое действие редукции в API плагина, чтобы форма больше не инициализировалась при монтировании

вот новое действие, в котором я хочу инициализировать свою форму:

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

и в моей конфигурации магазина:

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,
});

и моя конфигурация формы выглядит так:

reduxForm({
    form: 'customForm',
    destroyOnUnmount: false,
})
person Mohammad altenji    schedule 14.05.2019