0

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?

Geno Diaz
  • 400
  • 1
  • 7
  • 21

0 Answers0