Remove props.key workaround

[ratson]

Pull request #6 introduced a workaround for facebook/react#2517.
Should be removed when React fixed it.

[gerhardsletten]

I am also experience trouble with this. If I connect a component to state.intl.locale the componentWillReceiveProps function is not called when locale is changed in store.

componentWillReceiveProps (nextProps) {
  if (this.props.intLang !== nextProps.intLang) {
    console.log('page locale', this.props.intLang, ' => ', nextProps.intLang)
  }
}

But if I remove the key in mapStateToProps in IntlProvider it works as expected.

const mapStateToProps = (state, {intlSelector = defaultSelector}) => {
  const intl = intlSelector(state)
  return {
    ...intl
  }
}

[ratson]

@gerhardsletten From my test, I don't experience this problem, so I am planning to remove this hack and use the intlSelector directly, so anyone need this could provide their own intlSelector. What do you think?

[gerhardsletten]

Sorry, been some time since I touched this, but in this use-case we also kept an preference-reducer, so we connected our views to it to re-render / load localized content in the newly chosen language. It was a stack with many players, so it could be some other dependency which made the componentWillReceiveProps check not work.

[ratson]

A custom intlSelector with key property is equivalent to this hack, so people need this could provide their implementation.

[kimmoahola]

Hi @ratson, removing the key broke our app.

Is this a good workaround (or is there a simpler one?) to the problem where changing locale does not re-render components?

import { connect } from 'react-redux';
import { IntlProvider } from 'react-intl';

function defaultSelector(state) {
  return {
    ...state.intl,
    key: state.intl.locale,
  };
}

const mapStateToProps = (state, { intlSelector = defaultSelector }) => intlSelector(state);

export default connect(mapStateToProps)(IntlProvider);

And then use it like:

import { Provider } from 'react-redux';
import CustomIntlProvider from './i18n/customIntlProvider';
import RoutedApp from './RoutedApp';

....

  render() {
    return (
      <Provider store={store}>
        <CustomIntlProvider>
          <RoutedApp />
        </CustomIntlProvider>
      </Provider>
    );
  }