Question

im试图将react-i18next与redux一起使用。

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

可悲的是，由于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;

index.js，我在其中调用i18n实例（切出了不必要的代码）

....
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

Reacti18next在Redux上存储当前语言

1 个答案: