abendleiter / react-intl-redux

Redux binding for React Intl.

React Intl Redux

Redux binding for React Intl.

Installation

npm install react-intl-redux react react-intl react-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 = () => {
  return (
    <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'

dispatch(updateIntl({
  locale,
  messages,
}))

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 {IntlProvider} from 'react-intl-redux'
import {Provider} from 'react-redux'

<Provider store={store}>
  <IntlProvider>
    <App />
  </IntlProvider>
</Provider>