Steps to create a React Application and Installing Modules
Step 1: Create a Redux application.
npx create-react-app <-foldername->
Step 2: Move to the project directory.
cd <-foldername->
Step 3: Install necessary dependencies in Redux application.
npm install react-intl redux react-redux
Project Structure
The Updated dependencies in package.json file is:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-intl": "^6.6.5",
"react-redux": "^9.1.0",
"react-scripts": "5.0.1",
"redux": "^5.0.1"
},
Example: Below is an example of Implementing Internationalization in Redux Application.
// index.js
// this is the project initial file
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from "react-redux";
import store from "./store/store";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
);
reportWebVitals();
// src/App.js
// This is the App.js where Language Selector and Translated Components imported
import React from "react";
import { IntlProvider } from "react-intl";
import { useDispatch, useSelector } from "react-redux";
import LanguageSelector from "./components/LanguageSelector";
import TranslatedComponent from "./components/TranslatedComponent";
function App() {
// eslint-disable-next-line no-unused-vars
const dispatch = useDispatch();
const locale = useSelector((state) => state.language.locale);
const messages = useSelector((state) => state.messages[locale]);
return (
<IntlProvider locale={locale} messages={messages}>
<div>
<LanguageSelector />
<TranslatedComponent />
</div>
</IntlProvider>
);
}
export default App;
// LanguageSelector Component
// src/components/LanguageSelector.js
import React from 'react';
import { useDispatch } from 'react-redux';
import { changeLanguage } from '../store/actions/languageActions';
const LanguageSelector = () => {
const dispatch = useDispatch();
const handleChange = (e) => {
dispatch(changeLanguage(e.target.value));
};
return (
<div>
<select onChange={handleChange}>
<option value="en">English</option>
<option value="fr">French</option>
<option value="sp">Spanish</option>
<option value="hi">Hindi</option>
<option value="rs">Russian</option>
</select>
</div>
);
}
export default LanguageSelector;
// Translated Component
// src/components/TranslatedComponent.js
import React from 'react';
import { FormattedMessage } from 'react-intl';
const TranslatedComponent = () => {
return (
<div>
<h1><FormattedMessage id="app.title" /></h1>
<p><FormattedMessage id="app.description" /></p>
</div>
);
};
export default TranslatedComponent;
// src/store/actions/languageActions.js
export const changeLanguage = (language) => {
return {
type: 'CHANGE_LANGUAGE',
payload: language
};
};
// src/store/reducers/index.js
import { combineReducers } from 'redux';
import languageReducer from './languageReducer';
import messageReducer from './messageReducer';
const rootReducer = combineReducers({
language: languageReducer,
messages: messageReducer
});
export default rootReducer;
// src/store/reducers/languageReducer.js
const initialState = {
locale: 'en' // Set initial language to English
};
const languageReducer = (state = initialState, action) => {
switch (action.type) {
case 'CHANGE_LANGUAGE':
return {
...state,
locale: action.payload
};
default:
return state;
}
};
export default languageReducer;
// src/store/reducers/messageReducer.js
const initialState = {
en: {
"app.title": "Redux internationalization (i18n)",
"app.description": "This is a simple example of internationalization in Redux using react-intl."
},
fr: {
"app.title": "Internationalisation Redux (i18n)",
"app.description": "Ceci est un exemple simple d'internationalisation dans Redux en utilisant react-intl."
},
sp: {
"app.title": "Internacionalización Redux (i18n)",
"app.description": "Este es un ejemplo simple de internacionalización en Redux usando react-intl."
},
hi: {
"app.title": "Redux अंतर्राष्ट्रीयकरण (i18n)",
"app.description": "यह Redux में अंतरराष्ट्रीयकरण का एक सरल उदाहरण है जो react-intl का उपयोग करता है।"
},
rs: {
"app.title": "Redux интернационализация (i18n)",
"app.description": "Это простой пример интернационализации в Redux с использованием react-intl."
}
};
const messageReducer = (state = initialState, action) => {
switch (action.type) {
default:
return state;
}
};
export default messageReducer;
// src/store/store.js
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;
Start your application suing the following command:
npm run start
Output:
How to Implement Internationalization (i18n) in Redux Applications?
Implementing internationalization (i18n) in a Redux application enhances its accessibility and usability by allowing users to interact with the application in their preferred language. With i18n, your Redux app becomes multilingual, accommodating users from diverse linguistic backgrounds and improving their overall experience.
Contact Us