每当触发 react-intl 更新操作时，都会重新安装 redux 表单答案

【问题标题】：redux form remounted whenever react-intl update action is fired每当触发 react-intl 更新操作时，都会重新安装 redux 表单
【发布时间】：2019-09-30 16:15:44
【问题描述】：

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

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

【问题讨论】：

标签： reactjs redux redux-form react-intl

【解决方案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,
})

【讨论】：