React-intl çoklu dil uygulaması: dilleri ve çeviri depolarını değiştirme

Question

Reaktif yönlendirici uygulamasına sahibim ve i18n eklemek istiyorum. tepki-Intl example kök bileşeni IntlProvider sarılmış:

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

);

Ancak yalnızca bir yerel ayar var. Diğer diller eklemek için uygulamayı nasıl güncellersiniz ve çevirileri saklamanın en iyi yolu nasıldır?

Answer 1

Aynı sorun ile karşı karşıya kaldılar ve bu ne buldum geçerli:

Ben çözüm temelde Bağlan fonksiyonu ile ReduxStore için IntlProvider bağlayıcıdır here, sağlanan kullanılan dili değiştirmek için. Ayrıca, bileşenleri dil değişikliğinde yeniden render etmek için anahtar eklemeyi de unutmayın.

Bu ConnectedIntlProvider.js, sadece varsayılan IntlProvider giriş noktası dosyasında sonra

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); 

Ve (orijinal github üzerinde yorumda eksik anahtar pervane dikkat edin) bağlar: Bu temelde tüm kodudur: yapmak

// 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)); 

sonraki şey sadece yerel yönetimi için redüktör uygulamak ve talep üzerine dillerini değiştirmek için eylem yaratıcıları yapmaktır.

Çevirileri saklamanın en iyi yolu olarak - Bu konu hakkında birçok tartışma buldum ve durum oldukça kafa karışmış gibi görünüyor, dürüst olmak gerekirse, tarih ve sayı biçimlerinde çok fazla tepki odaklı bir şekilde odaklanmayı ve unutmayı çok şaşırıyorum. çeviri. Bu yüzden, bunu yapmak için kesinlikle doğru yolu bilmiyorum, ancak şu şekilde yapıyorum:

"locales" klasörünü oluşturun ve içinde "en.js", "fi.js" gibi dosyaları bir araya getirin, "ru.js", vb. Temel olarak birlikte çalıştığınız tüm diller. Böyle çevirileri her dosya ihracat json nesnesi olarak
:

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', 
    } 
} 

Diğer dosyalar aynı yapıyı ama içinde çevrilmiş dizeleri ile var.
Ardından, dil değişikliğinden sorumlu olan indirgeyici, tüm dosyaları bu dosyalardan içe aktarır ve dili değiştirme eylemi gönderilir edilmez, bunları redux deposuna yükler. Önceki adımda oluşturulan bileşeniniz, IntlProvider'da değişikliklere yarayacak ve yeni yerel ayar gerçekleşecektir. <FormattedMessage> veya intl.formatMessage({id: 'app.header.title'})} kullanarak çıktılar, daha fazla bilgiyi kendi github wiki'lerinde okuyun.
Orada bazı DefineMessages işlevi var, ama dürüstçe, nasıl kullanacağımı iyi bir bilgi bulamadım, temelde bunu unutabilir ve tamam olabilir.