Where do you actually store your translation object?

Has anyone used this for a real large project that might need to support multiple different languages? I find it hard to believe that having all your translations inline in app.js is sustainable on a large scale. I would like to separate my translation files by component for maximum portability and modularization (I understand the overhead this adds to the task of translating), but I’m not sure how best to do that with this package.

[ozluy]

Hi @beaulm,

Create a i18n folder to and put en.js, tr.js and index.js inside of it

en.js

 export const en = {
    application: {
      name: 'Name Surname',
      company: 'Company',
      blog: 'Website',
      location: 'Location',
      email: 'Email Address',
      created_at: 'Account Create Date',
      desc:'%{name} on Github'
    },
    date: {
      long: 'MMMM Do, YYYY'
    }
    
  };

tr.js

 export const tr = {
    application: {
      name: 'Ad Soyad',
      company: 'Şirket',
      blog: 'Web Sayfası',
      location: 'Lokasyon',
      email: 'Email',
      created_at: 'Hesap Açılış Tarihi',
      desc:'Github\'ta %{name}'
    },
    date: {
      long: 'DD.MM.YYYY'
    }
  };

index.js

import { tr } from './tr';
import { en } from './en';
export const translationsObject = {
    tr: tr,
    en: en
};

then import index.js same as I did below(line with emojis) in your store file

store.js

import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from '../reducers';
import reduxImmutableStateInvariant from 'redux-immutable-state-invariant';
import thunk from 'redux-thunk';
import { loadTranslations, setLocale, syncTranslationWithStore } from 'react-redux-i18n';
import { translationsObject } from '../i18n/index.js';//⛄🌨❄ 

export default function configureStore(initialState) {

  const finalCreateStore = compose(
    applyMiddleware(thunk, reduxImmutableStateInvariant()),
    window.devToolsExtension ? window.devToolsExtension() : f => f

  )(createStore);


  const store = finalCreateStore(rootReducer, initialState);
  if (module.hot) {
    module.hot.accept('../reducers', () =>
      store.replaceReducer(require('../reducers'))
    );
  }
  syncTranslationWithStore(store);
  store.dispatch(loadTranslations(translationsObject));
  localStorage.getItem('appLang') ? null : localStorage.setItem('appLang', 'tr');
  store.dispatch(setLocale(localStorage.getItem('appLang')));
  return store;
}

Hope thats what you are looking for…

Happy Hacking 👍

[flo-sch]

Can we close this one?