प्रतिक्रिया-इंटेल बहु भाषा ऐप: भाषाएं और अनुवाद भंडारण

Question

मेरे पास प्रतिक्रिया-राउटर ऐप है और मैं i18n जोड़ना चाहता हूं। प्रतिक्रिया-intl में example जड़ घटक IntlProvider में लिपटे:

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

);

लेकिन केवल एक लोकेल है। अन्य भाषाओं को जोड़ने के लिए ऐप कैसे अपडेट करें और अनुवादों को स्टोर करने का सबसे अच्छा तरीका कैसा है?

Answer 1

मैं एक ही समस्या का सामना करना पड़ा है और इस मैं क्या पता चला है:

मैं समाधान here, जो मूल रूप से IntlProvider बाध्यकारी है कनेक्ट समारोह के साथ ReduxStore के लिए प्रदान की उपयोग की गई भाषा को बदलने के लिए। भाषा परिवर्तन पर घटकों को फिर से प्रस्तुत करने के लिए कुंजी शामिल करना भी न भूलें।

यह ConnectedIntlProvider.js है, बस बांधता डिफ़ॉल्ट IntlProvider

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

और फिर अपने प्रवेश बिंदु फ़ाइल में (कुंजी प्रोप कि GitHub पर मूल टिप्पणी में गुम हैं): यह मूल रूप से सभी कोड है: ऐसा करने के लिए

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

अगला बात सिर्फ वातावरण के प्रबंधन के लिए कम करने को लागू करने और मांग पर भाषाओं को बदलने के लिए कार्रवाई रचनाकारों बनाना है।

अनुवादों को संग्रहित करने का सबसे अच्छा तरीका है - मुझे इस विषय पर कई चर्चाएं मिलीं और स्थिति काफी उलझन में प्रतीत होती है, ईमानदारी से मैं काफी परेशान हूं कि प्रतिक्रिया-अंतराल के निर्माताओं को तारीख और संख्या प्रारूपों पर इतना ध्यान केंद्रित किया जाता है और इसके बारे में भूल जाते हैं अनुवाद। इसलिए, मुझे इसे संभालने का बिल्कुल सही तरीका नहीं पता है, लेकिन यह वही है जो मैं करता हूं:

फ़ोल्डर "लोकल" बनाएं और अंदर "en.js", "fi.js" जैसी फ़ाइलों का समूह बनाएं, "ru.js", आदि मूल रूप से सभी भाषाओं के साथ आप काम करते हैं।
इस तरह अनुवाद के साथ हर फ़ाइल निर्यात json वस्तु में:

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

अन्य फ़ाइलें ठीक उसी संरचना लेकिन अनुवाद तार के अंदर के साथ की है।
फिर भाषा परिवर्तन के लिए जिम्मेदार reducer में इन फ़ाइलों से सभी राज्यों को आयात करें और भाषा बदलने के लिए कार्रवाई के रूप में जल्द ही उन्हें Redux स्टोर में लोड करें। पिछले चरण में बनाया गया आपका घटक IntlProvider में परिवर्तनों का प्रचार करेगा और नया लोकेल होगा। इसे <FormattedMessage> या intl.formatMessage({id: 'app.header.title'})} का उपयोग करके पृष्ठ पर आउटपुट करें, उस पर उनके जीथब विकी पर और पढ़ें।
उनके पास कुछ DefineMessages कार्य हैं, लेकिन ईमानदारी से मुझे इसका उपयोग करने के लिए कोई अच्छी जानकारी नहीं मिली, मूल रूप से आप इसके बारे में भूल सकते हैं और ठीक हो सकते हैं।