App multi-lingua React-intl: cambio di lingua e memorizzazione delle traduzioni

Question

Ho un'app per il react-router e vorrei aggiungere i18n. In reagire-Intl example componente principale avvolto in IntlProvider:

ReactDOM.render(
<IntlProvider locale="en"> 
    <App /> 
</IntlProvider>, 
document.getElementById('container') 

);

Ma c'è solo una locale. Come aggiornare l'app per aggiungere altre lingue e qual è il modo migliore per memorizzare le traduzioni?

Answer 1

Ho affrontato lo stesso problema e questo è quello che ho scoperto:

Per cambiare la lingua che ho usato soluzione fornita here, che è fondamentalmente vincolante IntlProvider a ReduxStore con funzione Connect. Inoltre, non dimenticare di includere la chiave per ri-rendering dei componenti sul cambio di lingua. Questo è fondamentalmente tutto il codice:

Questo è ConnectedIntlProvider.js, si lega solo difetto IntlProvider (si noti il ​​puntello chiave che manca nel commento originale su GitHub)

import { connect } from 'react-redux'; 
import { IntlProvider } from 'react-intl'; 

// This function will map the current redux state to the props for the component that it is "connected" to. 
// When the state of the redux store changes, this function will be called, if the props that come out of 
// this function are different, then the component that is wrapped is re-rendered. 
function mapStateToProps(state) { 
    const { lang, messages } = state.locales; 
    return { locale: lang, key: lang, messages }; 
} 

export default connect(mapStateToProps)(IntlProvider); 

E poi nel file punto di ingresso:

// index.js (your top-level file) 

import ConnectedIntlProvider from 'ConnectedIntlProvider'; 

const store = applyMiddleware(thunkMiddleware)(createStore)(reducers); 

ReactDOM.render((
    <Provider store={store}> 
    <ConnectedIntlProvider> 
     <Router history={createHistory()}>{routes}</Router> 
    </ConnectedIntlProvider> 
    </Provider> 
), document.getElementById(APP_DOM_CONTAINER)); 

La prossima cosa da fare è quella di implementare solo riduttore per la gestione locale e fare creatori di azione per cambiare la lingua su richiesta.

Per quanto riguarda il modo migliore per archiviare le traduzioni - Ho trovato molte discussioni su questo argomento e la situazione sembra essere abbastanza confusa, onestamente sono abbastanza sconcertato che i produttori di react-intl si concentrino tanto sui formati di data e numero e dimenticano traduzione. Quindi, non conosco il modo assolutamente corretto per gestirlo, ma questo è quello che faccio:

Creare la cartella "locales" e all'interno creare un sacco di file come "en.js", "fi.js", "ru.js", ecc. Fondamentalmente tutte le lingue con cui lavori.
In ogni esportazione oggetto JSON file con le traduzioni di questo tipo:

export const ENGLISH_STATE = { 
    lang: 'en', 
    messages: { 
     'app.header.title': 'Awesome site', 
     'app.header.subtitle': 'check it out', 
     'app.header.about': 'About', 
     'app.header.services': 'services', 
     'app.header.shipping': 'Shipping & Payment', 
    } 
} 

Altri file hanno stessa struttura esatta, ma con le stringhe tradotte all'interno.
Quindi nel riduttore responsabile della modifica della lingua importare tutti gli stati da questi file e caricarli in un nuovo negozio non appena vengono inviate le azioni per cambiare lingua. Il componente creato nel passaggio precedente propagherà le modifiche a IntlProvider e si verificherà una nuova locale. Pubblicalo a pagina usando <FormattedMessage> o intl.formatMessage({id: 'app.header.title'})}, leggi di più su questo al wiki di github.
Hanno una funzione DefineMessages lì, ma sinceramente non sono riuscito a trovare alcuna informazione valida su come usarlo, in pratica puoi dimenticarlo ed essere OK.