Redux binding for React Intl.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ Remove lerna and usage of workspaces Jul 26, 2018
examples Fix multiple languages example, close #53 Sep 13, 2018
src Remove lerna and usage of workspaces Jul 26, 2018
test Polyfill Intl for test Jul 26, 2018
.babelrc Fix multiple languages example, close #53 Sep 13, 2018
.gitignore Update enzyme Sep 26, 2017
CHANGELOG.md Update CHANGELOG Jul 26, 2018
LICENSE Add LICENSE, close #49 Jul 10, 2018
README.md Document using intl in action, close #54 Oct 2, 2018
package.json v2.1.0 Dec 14, 2018

README.md

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

  1. 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.
  1. How to use intl in asynchronous action?

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