In today’s globalized world, it has become increasingly important for app developers to cater to users from different linguistic backgrounds. One way to achieve this is by building a multi-language app that can seamlessly switch between different languages based on user preferences. In this blog post, we will explore how to accomplish this using Redux and i18next.

Getting Started

Before delving into the implementation details, let’s quickly outline the prerequisites for building a multi-language app with Redux and i18next:

1. Basic understanding of React and Redux.
2. Familiarity with i18next library for internationalization.

Step 1: Install Dependencies

To begin, we need to install the necessary dependencies for our project. Open your terminal, navigate to your project directory, and execute the following command:

npm install --save redux react-redux i18next i18next-react i18next-browser-languagedetector

This command will install Redux, React Redux bindings, i18next library, and necessary plugins for language detection in the browser.

Step 2: Set Up Redux Store

Next, we need to set up a Redux store to handle the state management of our app. Create a new store.js file and add the following code:

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

In this code snippet, we import the createStore function from Redux and create a store using our root reducer. You can customize the rootReducer to suit your app’s needs.

Step 3: Configure i18next

Now, let’s configure i18next to enable translation in our app. Create a new i18n.js file and add the following code:

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18next
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    detection: {
      order: ['navigator']
    },
    resources: {
      en: {
        translation: {
          // English translations
        },
      },
      fr: {
        translation: {
          // French translations
        },
      },
    },
  });

export default i18next;

In this code snippet, we import the necessary modules from i18next and configure the language detection using LanguageDetector. We also provide translations for English and French languages in the resources section.

Step 4: Create Language Reducer

Now, let’s create a Redux reducer to handle the language selection in our app. Create a new languageReducer.js file and add the following code:

const languageReducer = (state = 'en', action) => {
  switch (action.type) {
    case 'SET_LANGUAGE':
      return action.payload;
    default:
      return state;
  }
};

export default languageReducer;

In this code snippet, we define a reducer that handles the “SET_LANGUAGE” action and updates the state with the selected language.

Step 5: Update Root Reducer

Next, we need to update the root reducer to include our newly created languageReducer. Open the reducers/index.js file and modify it as follows:

import { combineReducers } from 'redux';
import languageReducer from './languageReducer';

const rootReducer = combineReducers({
  language: languageReducer,
});

export default rootReducer;

In this code snippet, we import the combineReducers function from Redux and combine our languageReducer with other reducers if needed.

Step 6: Implement Language Switcher Component

Now, let’s create a LanguageSwitcher component to allow users to switch between supported languages. Create a new LanguageSwitcher.js file and add the following code:

import React from 'react';
import { useDispatch } from 'react-redux';
import { useTranslation } from 'react-i18next';

const LanguageSwitcher = () => {
  const { t, i18n } = useTranslation();
  const dispatch = useDispatch();

  const handleLanguageChange = (language) => {
    dispatch({ type: 'SET_LANGUAGE', payload: language });
    i18n.changeLanguage(language);
  };

  return (
    <div>
      <button onClick={() => handleLanguageChange('en')}>{t('english')}</button>
      <button onClick={() => handleLanguageChange('fr')}>{t('french')}</button>
    </div>
  );
};

export default LanguageSwitcher;

In this code snippet, we use the useTranslation hook from react-i18next to access the translation function t and the i18n instance. We also use the useDispatch hook from react-redux to dispatch the language change action to the Redux store.

Step 7: Integrate Language Switcher

Finally, integrate the LanguageSwitcher component into your app’s main component. Import and render the LanguageSwitcher component where appropriate in your app’s component hierarchy.

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import LanguageSwitcher from './LanguageSwitcher';

const App = () => {
  return (
    <Provider store={store}>
      <div>
        {/* Your app's content */}
        <LanguageSwitcher />
      </div>
    </Provider>
  );
};

export default App;

Conclusion

Congratulations! You have successfully built a multi-language app using Redux and i18next. Users can now switch between different languages seamlessly, providing a localized experience to a global audience. Explore more features and options available in Redux and i18next documentation to further enhance your multi-language app.

#multilanguage #React