ratson/react-intl-redux

FormattedMessage in a connected component

Closed this issue · 2 comments

I probably am missing something but is FormattedMessage supposed to work from a connected component?

I took this example https://github.com/ratson/react-intl-redux/blob/master/examples/multiple-languages/src/index.js and modified it like so:

  1. Moved FormattedMessage part into a separate component:
class Sample extends React.Component {
    render() {
        return(
            <p>
                <FormattedMessage id="app.greeting" defaultMessage="Hello!" />
            </p>
        );
    }
}
const SampleConnected = connect()(Sample);
  1. Root app now looks like this:
<Provider store={store}>
                <IntlProvider>
                    <div>
                        <SampleConnected/>
                        <p>
                            <button onClick={this.handleLoadlLocales}>
                                Local locales
                            </button>{' '}
                            <SwitchLocale />
                        </p>
                        <DevTools />
                    </div>
                </IntlProvider>
            </Provider>

...and I couldn't get locale switching to work with this code (the action dispatches normally):

selection_055

If I use a non-connected component:

<Provider store={store}>
                <IntlProvider>
                    <div>
                        <Sample/>
                        <p>
                            <button onClick={this.handleLoadlLocales}>
                                Local locales
                            </button>{' '}
                            <SwitchLocale />
                        </p>
                        <DevTools />
                    </div>
                </IntlProvider>
            </Provider>

locale switch works fine:

selection_056

@ratson oh, ok - thanks