IntlProvider & Redux StoreProvider

ConnectedIntlProvider.jsx

import React from 'react'
import { IntlProvider } from 'react-intl'
import { Provider as StoreProvider, connect } from 'react-redux'
import { createStore } from 'redux'

import { appStore } from './store'

import messages_de from './translations/de.json'
import messages_en from './translations/en.json'
import messages_pl from './translations/pl.json'

/**
 * Translations.
 */
const messages = {
  de: messages_de,
  en: messages_en,
  pl: messages_pl,
}

/**
 * Aplication Store.
 */
const store = createStore(appStore)

const ConnectedIntlProvider = connect(state => {
  const { language } = state

  return { locale: language, messages: messages[language] }
})(IntlProvider)

/**
 * Top-Level context Providers.
 */
const Providers = ({ children }) => {
  return (
    <StoreProvider store={store}>
      <ConnectedIntlProvider>
        {children}
      </ConnectedIntlProvider>
    </StoreProvider>
  )
}

export default Providers