How to Implement Internationalization (i18n) in Redux Applications?

// 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;