index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { addLocaleData, IntlProvider } from 'react-intl';
import * as locale_en  from 'react-intl/locale-data/en';
import * as locale_es from 'react-intl/locale-data/es';
const en = require('./i18n/locales/en.json');
const es = require('./i18n/locales/es.json');
import { flattenMessages } from './utils';

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import App from './components/App/App';
import { rootReducers } from './reducers';
import './index.css';

/**
 * Creates redux store from combining reducers
 */

const store = createStore(rootReducers);
addLocaleData([...locale_en , ...locale_es]);
const locale = navigator.language.split(/[-_]/)[0];
const messages = {
  'en': en,
  'es': es
};

ReactDOM.render(
  <IntlProvider locale={locale} 
  key={locale} 
  messages={flattenMessages(messages[locale])}>
  <Provider store={store}>
    <App />
  </Provider>
</IntlProvider>,
document.getElementById('root') as HTMLElement
);