アプリケーションをローカライズするために Yahoo React-Intl を実装しています。これを行うには、次のように ROOT を Localizer でラップする必要があります。
const Root = React.createClass({
childContextTypes: {
refresh: React.PropTypes.func
},
getChildContext() {
return {
refresh: () => this.forceUpdate()
}
},
render() {
let { language, messages } = this.props;
return (
<Provider store={store }>
<IntlProvider locale="en" messages= { messages } >
<Router history={browserHistory}>
</Router>
</IntlProvider>
</Provider>
)
}
}
function mapStateToProps(state) {
return {
language: state.currentLanguage.language,
messages: state.currentLanguage.messages
};
}
export default connect(mapStateToProps, {})(Root)
「メッセージ」は、キーと値の変換マッピングを含む JSON オブジェクトです。
私の問題は、ユーザーが言語を変更できるように、これを動的にする必要があることです。アプリケーション状態内のメッセージ プロップに割り当てられたオブジェクトを変更するために、Action/Reducer コンボを作成しました。ただし、アクションとフィード メッセージを新しいオブジェクトとして呼び出すと、ページ全体が更新され、状態が初期値に戻ります。
Messages はデフォルトで null 変数であり、漢字の ID 値を含むオブジェクトが割り当てられます。デフォルトでオブジェクトを指定すると、翻訳が正しく表示されます。アプリケーションが更新され、目的の結果が得られないのは、アクションを介して更新した場合のみです。
アプリケーションが更新される原因は何ですか?