rex-intl

react redux react-intl package

npm i -S rex-intl react react-dom redux react-redux react-intl rex-cookies cookies js-cookie

package exports

• middleware: Express middleware
• IntlProvider: react-intl provider wrapped in some code to automatically use the rex-intl reducer
• intl: Redux reducer

middleware

Helps with managing translations on Express and React.

• Uses a cookie named 'language' to share the language between site and server.
• If the cookie is not set, determine the best language from the 'accept-languages' header and the servers 'supported' languages.
• To change the language use a query string named 'language' with the language of choice.

Webapp

Notes about intl in a webapp. These notes are not about the package. They are general notes about INTL configurations.

Functions

negotiate

ExpressJS middleware to determine the locale to use for the request. This middleware must run after cookie-parser

1. Check if cookie had locale
2. Check if language set in query parameters
3. If cookie and query parameter both set: Update cookie to use new locale
4. If neither set: Determine locale from accept-languages & supported languages

Handle query parameter

Set locale

ExpressJS middleware to set the user's locale for the session

1. sets the locale in a cookie

change Locale

1. Verify the new locale is different than the current locale
2. Set the locale in the cookie
3. If logged in: update user's account
4. On client: if received a new language cookie: refresh the page.

Language selection

Notes about selecting and changing languages

new user

New user comes to the site. We have no previous information on the user

1. server receives request
2. call negotiate

The users locale will be determined by accept-languages & supported languages

return user

User comes back to the site for a revisit without being logged in.

1. server receives request
2. call negotiate

The users locale will be determined by the cookie

sign up

User signs up for the site and logs in

1. server receives request
2. call negotiate
3. sign up: set language to current language
4. on client: hide language buttons in footer

The account's locale will be determined by negotiate (the current setting).

Login from new device

Unknown user comes to site then logs in

1. server receives request
2. call negotiate
3. sign in: set language to user's language (call change locale)
4. on client: hide language buttons in footer.

Change language

New user comes to site and wants to change languages

1. React sets buttons in footer. (A button for each supported language)
   1. set the buttons URL to the current page. Add query parameter for the language.
2. User clicks button in footer
3. server receives request
4. call negotiate
5. send web page with proper language

authenticated user changes languages

Authenticated user wishes to change languages

1. React has page in settings with language options
2. Follow same process as Change language but use a different button.

IntlProvider

Wraps react-intl's IntlProvider to use the rex-intl reducers by default.

import React, {PropTypes} from 'react'
import {Provider as Redux} from 'react-redux'
import {IntlProvider} from 'rex-intl' // or import IntlProvider from 'rex-intl/lib/provider'

const Provider = ({store}) => (
  <Redux store={store}>
    <Intl>
      {children}
    </Intl>
  </Redux>
)

Provider.propTypes = {
  children: PropTypes.any,
  store: PropTypes.any
}

export default Provider

Use's react-redux to pass in rex-intl's intl reducer and then sets the locale & messages.

intl / Reducer

import {createStore, applyMiddleware, combineReducers} from 'redux'
import {intl} from 'rex-intl' // or import intl from 'rex-intl/lib/reducer'

const buildStore = (cookieDependency, state = {}) => {
  const rootReducer = combineReducers({intl})

  return createStore(rootReducer)
}

The reducer must be paired with rex-cookies. The reducer expects the language to be in the language cookie. You must dispatch a GET_COOKIE action for the reducer to be populated.

The provider expects Redux to use combineReducers and put rex-intl reducer in intl

Actions

// Read the 'language' cookie and dispatch the data.
{
  type: 'GET_COOKIE',
  name: 'language'
}

Store state

{
  // string with the user's locale
  language: 'en',

  // object with key value pairs that react-intl will need to configure their provider.
  messages: {
    key1: 'message1'
  }
}