每当触发 react-intl 更新操作时，redux 表单都会重新挂载

Question

我的应用程序和 redux 表单位于 IntlProvider 组件中，就像这样：

<IntlProvider>
    <Form />
</IntlProvider>

问题是，每当我尝试通过调用 updateIntl 操作来更改语言环境值来更改应用程序语言时，redux 表单组件将再次重新安装并重置表单中的所有状态和道具。

我正在使用 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，因为我已经连接了反应路由器并且我需要在路由之间移动时初始化表单。

我试图将我的表单包装到基于的 reducer 插件，但我仍然无法阻止在调用 @@intl/UPDATE 后调用 redux-form 操作。

Answer 1

我通过变通解决方案解决了它，首先我将 destroyOnUnmount 设置为 false，然后我向 plugin api 添加了新的 redux 操作，因此表单不再在 mount

上初始化

这是我要初始化表单的新操作：

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

每当触发 react-intl 更新操作时，redux 表单都会重新挂载

redux form remounted whenever react-intl update action is fired

reactjs

redux

redux-form

react-intl