React-intl多言語アプリ：言語と翻訳の変更ストレージ

Question

私はreact-routerアプリを持っていて、i18nを追加したいと思います。反応・インターナショナルにexampleルートコンポーネントはIntlProviderに包ま：

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

）。

ただし、ロケールは1つのみです。他の言語を追加するためにアプリを更新する方法と、翻訳を保存する最良の方法は？

Answer 1

私は同じ問題に直面している、これは私が見つけたものです：

私は解決策は基本的に接続する機能をReduxStoreするIntlProviderを結合さhereを、提供に使用される言語を変更するには。また、言語の変更時にコンポーネントを再レンダリングするためにキーを含めることを忘れないでください。 、これはConnectedIntlProvider.jsある

ちょうどあなたのエントリ・ポイント・ファイル内の

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の上の元のコメントに欠けている重要な小道具に気づく）デフォルトIntlProviderをバインドします。これは基本的にすべてのコードです：

次に、ロケールを管理するための縮小機能を実装し、必要に応じて言語を変更するアクションクリエイターを作成するだけです。

翻訳を保存するための最良の方法として、このトピックに関する多くのディスカッションがあり、状況はかなり混乱しているようですが、正直言って私は反応型の作成者が日付と数値フォーマットに焦点を当て、翻訳。だから、私はそれを処理するための絶対に正しい方法を知らないが、これは私が何をするのですか：

"locales"フォルダを作成し、 "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', 
    } 
} 

他のファイルはまったく同じ構造を持っていますが、内部に翻訳された文字列を持ちます。
次に、言語の変更を担当するレデューサーで、これらのファイルからすべての状態をインポートし、言語を変更するアクションが送出されるとすぐにreduxストアにロードします。前の手順で作成したコンポーネントがIntlProviderに変更を伝播し、新しいロケールが実行されます。 <FormattedMessage>またはintl.formatMessage({id: 'app.header.title'})}を使ってページに出力してください。詳しくはgithub wikiをご覧ください。
彼らにはいくつかのDefineMessages機能がありますが、正直なところ、使い方を知ることができませんでした。基本的に忘れてOKです。