Multilanguage in react using redux - reactjs

Question

I'm new to React (but I already made a simple app with ReactNative). I made a simple web app with few components to make a user login. The problem is that it must support multilang and I can't totally understand how to use redux in order to change the system language from the child component 'Menu' to all the components that are or will be loaded inside the app.
Here are the main components:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<App />,
document.getElementById('root')
);
App.js
import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Link, Redirect } from "react-router-dom";
import Globals from './globals/globals.js';
import './assets/css/main.css';
import Menu from './components/Menu.js';
import Footer from './components/Footer.js';
import Loading from './components/Loading.js';
import Login from './pages/Login.js';
import Home from './pages/Home.js';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
language: "en",
accessToken: "",
isLogged: undefined,
}
}
componentDidMount(props) {
// Get access token if stored
let accessToken = localStorage.getItem('accessToken');
if ( accessToken !== undefined && accessToken !== null && accessToken !== '' ) {
// Try to contact the server to see if it's still viable
} else {
// Go to the login page because you're certainly not logged
localStorage.setItem( 'accessToken', "" );
this.setState({
accessToken: "",
isLogged: false,
});
}
}
render() {
let redirect;
if ( this.state.isLogged === false ) {
redirect = <Redirect to={{ pathname: '/login' }} />;
}
let pages;
if ( this.state.isLogged === undefined ) {
pages = <Loading/>;
} else {
pages = <div>
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
</div>;
}
return(
<Router>
<div className="page-wrapper">
<Menu />
<div className="site-content">
{pages}
{redirect}
</div>
<Footer />
</div>
</Router>
);
}
}
Menu.js
import React, { Component } from 'react';
import logo from './../assets/img/logo.png';
export default class Menu extends Component {
constructor(props) {
super(props);
this.state = {
language: "en",
menuState: 0,
}
}
toggleMenu() {
this.setState({
menuState: 1 - this.state.menuState
});
}
changeLanguage(language) {
alert('change language');
}
render() {
return(
<header>
<div className="menu-bar">
<div className="top-bar">
<div className="icon open" onClick={this.toggleMenu.bind( this )}></div>
<div className="logo-wrapper">
<img src={logo} alt="logo" />
</div>
<div className="language-selection-wrapper"></div>
</div>
<div className={this.state.menuState === 1 ? "menu-body opened" : "menu-body closed"}>
<div className="menu-sidebar">
<div className="sidebar-content">
<div className="sidebar-top-bar">
<div className="icon close" onClick={this.toggleMenu.bind( this, 1 )}></div>
<div className="logo-wrapper">
<img src={logo} alt="logo" />
</div>
</div>
<div className="language-selection-wrapper">
<div className={this.state.language === 'it' ? "language current" : "language"} onClick={this.changeLanguage.bind(this, 'it')}>IT</div>
<div className={this.state.language === 'en' ? "language current" : "language"} onClick={this.changeLanguage.bind(this, 'en')}>EN</div>
<div className={this.state.language === 'de' ? "language current" : "language"} onClick={this.changeLanguage.bind(this, 'de')}>DE</div>
</div>
</div>
</div>
</div>
</div>
</header>
);
}
}
And at the end Login.js
import React, { Component } from 'react';
import Globals from './../globals/globals.js';
import Loading from './../components/Loading.js';
import 'font-awesome/css/font-awesome.min.css';
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
language: "en",
loading: false
}
}
componentDidMount(){
document.title = "Login"
}
doLogin() {
alert('Fai il login');
this.setState({
loading: true
});
}
render() {
let loading;
if ( this.state.loading === true ) {
loading = <Loading/>;
}
return(
<div className="login-box">
<div className="welcome-message">
{Globals.messages.welcome[this.state.language]}
</div>
<div className="input-wrapper">
<input type="text" name="username" placeholder={Globals.placeholders.email[this.state.language]} />
</div>
<div className="input-wrapper">
<input type="password" name="password" placeholder={Globals.placeholders.password[this.state.language]} />
</div>
<div className="input-wrapper">
<button type="button" onClick={this.doLogin.bind(this)}><i className="fa fa-sign-in"></i><span>{Globals.placeholders.login[this.state.language]}</span></button>
</div>
{loading}
</div>
);
}
}
I'm also giving the globals.js file with translations
const Globals = {
baseUrl: "https://www.mywebsite.it/webservices/1.0/",
messages: {
welcome: {
it: "Benvenuto!",
en: "Welcome!",
de: "Willkommen!",
},
},
placeholders: {
email: {
it: "Email",
en: "Email",
de: "Email",
},
password: {
it: "Password",
en: "Password",
de: "Password",
},
login: {
it: "Login",
en: "Login",
de: "Login",
},
},
}
export default Globals;

Answer 1

you do not need Redux for internationalization.
Take a look at:
https://github.com/formatjs/react-intl
That's is the industry default for internationalization.