React I18next 在 redux 上存储当前语言

Question

我正在尝试将 react-i18next 与 redux 一起使用。

我主要做的是初始化 i18n 实例并尝试将当前语言存储在 redux 中，遗憾的是有一个问题，我使用 redux-persist 来保持状态，所以如果我关闭并打开应用程序 redux-persist将所有数据加载回缓存，因为这个过程可能需要一些时间 redux-persist 作为让应用程序等待缓存重新水化的一种方式，它可以通过将 PersistGate 与 loading 道具一起完成，我这样做在下面的代码中说明。

遗憾的是，由于 i18n 实例是在文件顶部导入的，因此它根本不会等待商店准备好，因此它会在应用打开后立即运行并尝试使用尚未准备好的商店。

知道如何在存储准备好之前保存 i18n 实例吗？

i18n.js 文件

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as RNLocalize from 'react-native-localize';

import store from 'Api/store';
import { setLanguageTag, sincronizeSettings } from 'Api/store/actions';
import { languages } from 'Base/config.json';

const translations = {
  en: { translation: require('Assets/translations/en.json') },
  pt: { translation: require('Assets/translations/pt.json') },
};

const languageDetector = {
  type: 'languageDetector',
  async: true,
  detect: async (callback) => {
    const storedLanguageTag = store.getState().settings.data?.languageTag;
    if (storedLanguageTag) {
      return callback(storedLanguageTag);
    }

    const { languageTag: deviceBestAvailableLanguageTag } = RNLocalize.findBestAvailableLanguage(
      languages.available,
    );

    const currentLanguageTag = deviceBestAvailableLanguageTag || languages.default;

    store.dispatch(setLanguageTag(currentLanguageTag));
    store.dispatch(sincronizeSettings());

    callback(currentLanguageTag);
  },
  init: () => {},
  cacheUserLanguage: () => {},
};

const i18n = i18next.createInstance();
i18n
  .use(languageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: languages.default,
    resources: translations,
    react: {
      useSuspense: false,
    },
  });

export default i18n;

我调用 i18n 实例的 index.js（删掉了不必要的代码）

....
import 'Api/i18n';

export default class App extends Component {
  render() {
    return (
        <Provider store={store}>
          <PersistGate persistor={persistor} loading={<Launch />}>
            <ReduxNetworkProvider pingInBackground>
              <AppContainer />
            </ReduxNetworkProvider>
          </PersistGate>
        </Provider>
    );
  }
}

Answer 1

在适当的 github 存储库上回答：https://github.com/i18next/react-i18next/issues/1040