ReactIntl work only when refreshing browser.

The translation only work on refresh. It seems because i have used a wrapper around the App.js that why its not working.

Also i tried to add a key to intlprovider the translation worked but now all my inner components get refresh.

Could there be a way to used reactintl when using an app wrapper without refreshing all inner components??

Below you can find the app.js, index.js and the app wrapper:

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './styles/global.css';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware, compose  } from 'redux';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';

import rootReducer from './redux/rootReducers';
import AppWrapperContainer from './containers/appWrapperContainer/appWrapperContainer';
import {localeSet} from './redux/actions/localeActions';


const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 const store = createStore(rootReducer, /* preloadedState, */ composeEnhancers(
    applyMiddleware(thunk)
  ));

if(localStorage.H24Lang)
{
 store.dispatch(localeSet(localStorage.H24Lang));
}

ReactDOM.render((

  <Provider store={store}>
    <AppWrapperContainer/>
  </Provider>

),

document.getElementById('root'));
registerServiceWorker();

AppWrapperContainer.js

import React, { Component } from 'react';
import { IntlProvider, addLocaleData} from "react-intl";
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import messages from '../../messages';
import en from "react-intl/locale-data/en";
import fr from "react-intl/locale-data/fr";
import App from "../../App";

addLocaleData(en);
addLocaleData(fr);



class AppWrapperContainer extends Component {

  constructor(props) {
    super(props);
    this.state = {

    };
}


  render() {
    const {lang} = this.props

    let locale = 
    (navigator.languages && navigator.languages[0])
    || navigator.language
    || navigator.userLanguage
    || lang

    return (
      // <IntlProvider locale={lang} messages={messages[lang]} key={lang}></IntlProvider>
      <IntlProvider locale={lang} messages={messages[lang]} >
        <App/>
      </IntlProvider>
    );
  }
}

AppWrapperContainer.propTypes = {
    lang: PropTypes.string.isRequired
}

//what reducer you need
function mapStateToProps(state) {
  console.log("State is", state);
    return {
      lang: state.locale.lang
    };
}

export default connect(mapStateToProps,null)(AppWrapperContainer);

App.js

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Home from './screens/home/home';
import { connect } from 'react-redux';
import { BrowserRouter as Router, Route,Redirect, Switch } from 'react-router-dom';



class App extends Component {

  constructor(props) {
    super(props);
    this.state = {

    };
  }


  componentWillMount() {

  }

  componentDidMount() {

  }

  render() {
    return (
        <div className="App">
          <Router>
            <div className = "app-main-content">
              <Route exact path='/' component={Home} />
          </Router>

        </div>
    );
  }
}

//what reducer you need
function mapStateToProps(state) {
    return {

    };
}

function mapDispatchToProps(dispatch) {
    return {

    };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);
728x90

1 Answers ReactIntl work only when refreshing browser.

The key prop in IntlProvider forces React to remount the component (and all its children), but you just want them to be re-rendered (not remounted).

First confirm that your stored state is changing its locale/lang value as expected and that this change goes thougth mapStateToProps to your AppWrapperContainer component. Then, make sure it is received in componentWillReceiveProps method and that a re-render is fired when its value changes. Then, all children will be re-rendered (if not blocked by shouldComponentUpdate method).

By the way, what is locale variable in AppWrapperContainer for?

5 months ago