出现错误“从商店获取区域设置时出错！

问：

在我的 react 应用程序中，我使用带有 redux react-redux-18n 库的类组件，有时我们在浏览器控制台中出现以下错误

请帮我解决。 下面是我的应用程序的一些代码片段。

添加提供程序装饰器.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;

设置本地化.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
);

作为分析此翻译错误的一部分，我尝试了以下内容。

1. 我们通过调用方法“syncTranslationWithStore”来获得翻译错误。因此，我们必须确保在初始化 redux 存储后必须调用此方法。并且代码在我们的应用程序中正确编写。 我已将此方法移至 try-catch 块以获取错误对象。我得到了以下错误。 错误：在执行 reducer 时，您不能调用 store.getState（）。reducer 已经接收了状态作为参数。从顶部减速器向下传递它，而不是从商店读取它。
2. 要修复上述错误，建议采用两种方法。
   • 删除 Redux Dev 工具扩展
   • 对窗口进行注释。REDUX_DEVTOOLS_EXTENSION&&窗口。REDUX_DEVTOOLS_EXTENSION（） 行。 该错误对象已解决，但实际的翻译错误仍在出现。
3. 已验证 redux 存储配置
4. 已验证i18n的减速器名称。由于提到了最新的文档，react-redux-i18n 库应该始终使用 i18n reducer 而不是 i18nextReducer。 npm：反应-redux-i18n
5. 使用我们的代码和文档验证了本地化配置。
6. 升级了最新版本的 react 库并验证
   • redux：@4.2.1
   • 反应-redux：@8.1.2
   • 反应-redux-i18n：@1.9.3
   • 反应：@16.6.0 但仍然存在错误。