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'))

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.

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 in props.
• Set key when dispatching updateIntl.
• Provide custom intlSelector for IntlProvider.

• How to use intl in asynchronous action?

A simple solution would be retrive intl object using injectIntl and pass it in the action payload.