Reacti18следующий магазин текущего языка на редуксе - PullRequest
Новая
       53

Reacti18следующий магазин текущего языка на редуксе

0 голосов
/ 09 января 2020

я пытаюсь использовать реактив-i18next с редуксом.

Что я в основном делаю, так это запускаю экземпляр i18n и пытаюсь сохранить текущий язык в редуксе, к сожалению, есть проблема, я использую редукс-персист чтобы сохранить состояние, поэтому, если я закрою и открою приложение, redux-persist загрузит все данные обратно в кэш, так как этот процесс может занять некоторое время, чтобы заставить приложение ждать, пока кэш будет переидегидирован, это можно сделать, поместив PersistGate с подпоркой загрузки, что я и делаю, как указано в приведенном ниже коде.

К сожалению, поскольку экземпляр i18n импортируется в начало файла, он вообще не будет ждать, пока магазин будьте готовы, чтобы он работал сразу после открытия приложения и пытался использовать хранилище, которое еще не готово.

Есть идеи, как удерживать экземпляр i18n до тех пор, пока хранилище не будет готово?

i18n. js file 

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>
    );
  }
}

1 Ответ

0 голосов
/ 12 января 2020

Ответил здесь в соответствующем репозитории github: https://github.com/i18next/react-i18next/issues/1040

...