I am implementing Yahoo React-Intl to localize my application. In order to do this I must wrap the ROOT with the Localizer like so:
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)
With "messages" being a JSON object containing key value translation mappings.
My problem is that I have to make this dynamic so that the user can choose to change languages. I have created an Action/Reducer combo in order to change objects assigned to the messages prop within the application state. However, when I call the action and feed messages a new object, the entire pages refreshes and my state goes back to initial values.
Messages by default is a null variable and is assigned an object containing id values to chinese characters. When given the object by default, the translations are seen correctly. It is only when I update it via action that the application refreshes and the desired results are not obtained.
What may be causing my application to refresh?