ratson
React Intl Redux
Redux binding for React Intl.
Building idiomatic React Redux Application by having translations in store and dispatching action to update it.
Installation
npm install react-intl-redux react react-intl react-redux redux --saveUsage
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux'
import { FormattedNumber } from 'react-intl'
import { Provider, intlReducer } from 'react-intl-redux'
import reducers from '<project-path>/reducers'
const reducer = combineReducers({
...reducers,
intl: intlReducer,
})
const store = createStore(reducer)
const App = () => (
<Provider store={store}>
<FormattedNumber value={1000} />
</Provider>
)
ReactDOM.render(<App />, document.getElementById('container'))Provide locale and messages on load
You should provide a different locale and messages if your user is not using en locale.
const initialState = {
intl: {
locale: 'it',
messages: {
'app.greeting': 'Ciao!',
},
},
// ...other initialState
}
const store = createStore(reducer, initialState)Refer to the initial-locale example for more details.
Switch locale and messages on request
You could also switch locale on user's request by dispatching updateIntl action.
import { updateIntl } from 'react-intl-redux'
store.dispatch(updateIntl({
locale,
messages,
}))React Intl in browsers only contain locale data for basic English by default, see Loading Locale Data for loading locale data in browsers.
Provider vs IntlProvider
In most cases, react-intl-redux will be wrapped immediately after Provider from react-redux. For convenient, react-intl-redux provides Provider to do that for you.
However, if you don't want it, you could do it manually via IntlProvider. For example,
import React from 'react'
import { IntlProvider } from 'react-intl-redux'
import { Provider } from 'react-redux'
const App = () => (
<Provider store={store}>
<IntlProvider>
<App />
</IntlProvider>
</Provider>
)Formatting Data
react-intl provides two ways to format data, see the official docs.
To change formats through React components,
import { updateIntl } from 'react-intl-redux'
store.dispatch(updateIntl({
locale,
formats,
messages,
}))Use with redux-immutable
See the usage in test.
Examples
There are some examples under the examples folder for reference.
Troubleshooting
Why my connected component does not update after locale change?
By default,
localeis used askeyforIntlProvider, which will trigger re-render when locale changes, things should just work.If it doesn't, here are few solutions could be tried,
- Do a
forceUpdateafter changing locale. - Mark the connecting compoent
{pure: false}. - Pass
localeinprops. - Set
keywhen dispatchingupdateIntl. - Provide custom
intlSelectorforIntlProvider.
- Do a
How to use
intlin asynchronous action?A simple solution would be retrive
intlobject usinginjectIntland pass it in the action payload.