Getting Error 'Error getting locale from store!'

Question

In my react application, I am using class components with redux react-redux-18n libraries and some of the times we are getting below errors in my browser console

Please help me with solution. Here is the some code snippets for my application.

add-provider-decorator.js

import React from 'react';
import {Provider} from 'react-redux';

import {
  addDecorator
} from '@storybook/react';

import {
  createStore,
  combineReducers,
  applyMiddleware
} from 'redux';

import thunk from 'redux-thunk';

import {
  loadTranslations,
  setLocale,
  syncTranslationWithStore,
  i18nReducer
} from 'react-redux-i18n';

const store = createStore(
  combineReducers({
    i18n: i18nReducer
  }),
  applyMiddleware(thunk)
);
syncTranslationWithStore(store);

const addProviderDecorator = () => {
  const ProviderDecorator = (storyFn) => (
    <Provider store={store}>
      {storyFn()}
    </Provider>
  );

  return fetchAndApplyTranslations().then(() => {
    addDecorator(ProviderDecorator);
  });
};

function fetchAndApplyTranslations() {
  return fetch('/translations.json', {
    method: 'GET',
    headers: {'Content-Type': 'application/json'}
  }).then((response) => {
    return response.json().then((translationsObject) => {
      store.dispatch(loadTranslations(translationsObject));
      store.dispatch(setLocale('en'));
    });
  });
}

export default addProviderDecorator;

setup-localization.js

export const localizationThunkCreator = (
  localizationAPI,
  updateLanguage,
  updateAvailableLanguages,
  setLocale,
  loadTranslations
) => async (store) => {
  const translations = await localizationAPI.fetchTranslationResource();
  const localizationConfig = await localizationAPI.fetchLocalizationConfig();
  const currentSelectedLanguage = selectLanguage(store.getState());
  const isCurrentlySelectedLanguageSupported = localizationConfig.availableLanguages
    .map((lang) => lang.value)
    .includes(currentSelectedLanguage);

  syncTranslationWithStore(store);

  store.dispatch(loadTranslations(translations));
  store.dispatch(updateAvailableLanguages(localizationConfig.availableLanguages));

  const resultLanguage = isCurrentlySelectedLanguageSupported ? currentSelectedLanguage : localizationConfig.fallbackLanguage;

  store.dispatch(setLocale(resultLanguage));
  store.dispatch(updateLanguage(resultLanguage));
};

export const setupLocalization = localizationThunkCreator(
  api.localization,
  updateLanguage,
  updateAvailableLanguages,
  setLocale,
  loadTranslations
);

As part of the analysis for this translation error, I have tried following.

1. We are getting translation errors by calling the method “syncTranslationWithStore“. So, we have to make sure that this method has to be called after the redux store is initialized. And the code is written correctly in our application. I have moved this method to try-catch block to get the error object. And I got below error. Error: You may not call store.getState() while the reducer is executing. The reducer has already received the state as an argument. Pass it down from the top reducer instead of reading it from the store.
2. To fix above mentioned error, there are two ways which are suggested.
   • remove the redux dev tool extension
   • comment the window.REDUX_DEVTOOLS_EXTENSION && window.REDUX_DEVTOOLS_EXTENSION() line from our code. That error object is resolved but actual translation errors are still getting.
3. Verified the redux store configuration
4. Verified the reducer names for i18n. Since latest documentation is mentioned that react-redux-i18n library should always use a i18n reducer instead of i18nextReducer. npm: react-redux-i18n
5. Verified localization configuration with our code and documentation.
6. Upgraded the latest version of react libraries and verified
   • redux: @4.2.1
   • react-redux: @8.1.2
   • react-redux-i18n: @1.9.3
   • react: @16.6.0 But still error is existed.