ratson / React Intl Redux
Programming Languages
Projects that are alternatives of or similar to React Intl Redux
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 --save
Usage
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'))
locale
and messages
on load
Provide 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.
locale
and messages
on request
Switch 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,
}))
redux-immutable
Use with See the usage in test.
TypeScript Support
This module does not ship with types definitions by itself, but there is community contributed @types/react-intl-redux
package.
Examples
There are some examples under the examples
folder for reference.
Troubleshooting
- Why my connected component does not update after locale change?
By default, locale
is used as key
for IntlProvider
, 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
forceUpdate
after changing locale. - Mark the connecting compoent
{pure: false}
. - Pass
locale
inprops
. - Set
key
when dispatchingupdateIntl
. - Provide custom
intlSelector
forIntlProvider
.
- How to use
intl
in asynchronous action?
A simple solution would be retrive intl
object using injectIntl
and pass it in the action payload.