Repository files navigation

Redux binding forReact Intl.

Building idiomatic React Redux Application byhaving translations in store and dispatching action to update it.

npm install react-intl-redux react react-intl react-redux redux --save

importReactfrom'react'importReactDOMfrom'react-dom'import{createStore,combineReducers}from'redux'import{FormattedNumber}from'react-intl'import{Provider,intlReducer}from'react-intl-redux'importreducersfrom'<project-path>/reducers'constreducer=combineReducers({  ...reducers,intl:intlReducer,})conststore=createStore(reducer)constApp=()=>(<Providerstore={store}><FormattedNumbervalue={1000}/></Provider>)ReactDOM.render(<App/>,document.getElementById('container'))

You should provide a differentlocale andmessages if your user is not usingen locale.

constinitialState={intl:{locale:'it',messages:{'app.greeting':'Ciao!',},},// ...other initialState}conststore=createStore(reducer,initialState)

Refer to theinitial-locale example for more details.

You could also switchlocale on user's request by dispatchingupdateIntl action.

import{updateIntl}from'react-intl-redux'store.dispatch(updateIntl({  locale,  messages,}))

React Intl in browsers only contain locale data for basic Englishby default, seeLoading Locale Datafor loading locale data in browsers.

In most cases,react-intl-redux will be wrapped immediately afterProvider fromreact-redux. For convenient,react-intl-redux providesProvider to do that for you.

However, if you don't want it, you could do it manually viaIntlProvider. For example,

importReactfrom'react'import{IntlProvider}from'react-intl-redux'import{Provider}from'react-redux'constApp=()=>(<Providerstore={store}><IntlProvider><App/></IntlProvider></Provider>)

react-intl provides two ways to format data, see theofficial docs.

To changeformats throughReact components,

import{updateIntl}from'react-intl-redux'store.dispatch(updateIntl({  locale,  formats,  messages,}))

See the usage intest.

There are some examples under theexamples folder for reference.

1. Why my connected component does not update after locale change?

By default,locale is used askey forIntlProvider, which will trigger re-render when locale changes, things should just work.

If it doesn't, here are few solutions could be tried,

• Do aforceUpdate after changing locale.
• Mark the connecting compoent{pure: false}.
• Passlocale inprops.
• Setkey when dispatchingupdateIntl.
• Provide customintlSelector forIntlProvider.

2. How to useintl in asynchronous action?

A simple solution would be retriveintl object usinginjectIntl and pass it in the action payload.