My redux-form is reinitialized when switching language by changing react-intl wrapper props

Question

I'm wrapping my app inside an IntlProvider from react-intl v2, like this:

<IntlProvider locale={this.props.lang} messages={this.props.messages}>

And I have my react-form forms down the tree. Everything is great.

But if I'm starting to fill up a form, and I decide to change the language of the UI (by listening to an action that will update my lang and messages props through my redux store), the form is being reset :-/

I see the action redux-form/INITIALIZE being fired when the lang changes.

And it happens even if I pass destroyOnUnmount: false to reduxForm().

It did not happen with uncontrolled form fields.

Any idea?

My code: App.js + Register form

score 3 · Accepted Answer · answered Mar 08 '16 at 16:34

3

Hmm... You are changing your initialValues prop, so it's initializing the form data. initialValues is intended to be used for canonical data from the server to be edited (e.g. a loaded record), not really for updating individual form values from outside the component.

Perhaps you could use the plugin() API to notice the language change action (is that being changed via Redux?) and update the lang value in your form?

answered Mar 08 '16 at 16:34

Erik R.

7,152
1
29
39

It works indeed! But only with `destroyOnUnmount: false` then... I'll keep experimenting and share my results here – Antoine Mar 08 '16 at 19:06
OK so it's fine, I just need to manually handle the cleaning of my form when unmounting then... https://github.com/antoinerousseau/mytribe/commit/7d26b850989042d46b8e0c72267e5fd1e06945e7 – Antoine Mar 08 '16 at 19:23
I found a way to keep `destroyOnUnmount: true` and still keep the initial value: by listening to the `DESTROY` and `INITIALIZE` actions of `redux-form`: https://github.com/antoinerousseau/mytribe/commit/4d39dfbdcc197ea47d77d9533065c6fb707cc55f#diff-ccdfddd88097e5403cefd300fa56e86cR22 – Antoine Mar 08 '16 at 20:56
@antoine129 can you please update your links in the comments, they are not working! – Muho May 13 '19 at 12:26
@Mohammadaltenji sorry I cannot edit my comment, and I don't have a public link to this anymore – Antoine May 16 '19 at 20:36
anyway this is all outdated, please read the latest doc of redux-form – Antoine May 16 '19 at 20:37

score 3 · Answer 2 · answered Apr 13 '16 at 08:26

We encountered the same issue when combining react-relay with redux-form. The solution was simple: we initialize the form when the form is mounted.

compose(
  createContainer({
    fragments: {
      viewer: () => Relay.QL`
        fragment on User {
          nickname
          email
        }
      `
    }
  }),
  reduxForm({
    form: "user",
    fields: ["nickname", "email"],
  })
)(
  class UserForm extends Component {
    componentWillMount() {
      this.props.initializeForm(this.props.viewer)
    }

    render() {
      // Same as before
    }
  }
)

Nice solution! But in the end I like the redux-form plugins: https://github.com/antoinerousseau/mytribe/blob/master/app/utils/formPlugins.js — Antoine, Apr 13 '16 at 16:13

My redux-form is reinitialized when switching language by changing react-intl wrapper props

2 Answers2

Linked