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

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

Answer 1

我通过一种解决方法解决了该问题，首先我将destroyOnUnmount设置为false，然后向plugin api添加了新的redux动作，以便不再在装入时初始化表单。

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

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表单

1 个答案: