Internationalization in a React/Redux javascript application

Internationalizea React/Redux Isomorphic Application

1. Add Initial State to Redux Store

2. Update through Redux Action

3. Add Format Components

4. Sync with Server Render

React-Intl & React-Intl-Redux Plugins

Redux Store

Load Language Data in one Place (main.jsx/index.jsx)

React-Intl-Redux Update

Translation &

Components

• Babel-Plugin-React-Intl

• Babelrc (remove before deploying to Heroku)

• Multiple Translation Files

• Use a Translator Script to pull all individual messages into one data.json file

React Component

Gotchas

• Syncing Server and Client Code

app-renderer.jsx (SSR) Use URL params

Update Redux Store to keep in sync

Index.jsx (Client Rendering)

Use Redux Store State

• Demo — https://dog-treats.herokuapp.com

• Code — https://github.com/cathyzoller/dog-treats

Resources