I18Next — дождитесь, пока в хранилище Redux будут установлены локальные данные

#react-native #redux #i18next #react-i18next #redux-persist

Вопрос:

Я бы хотел, чтобы i18next подождал, пока магазин redux будет готов. Я сохраняю выбранный пользователем язык в магазине, используя persistor from redux-persist для его регидратации при запуске приложения. Я попытался установить язык из магазина :

 // ...
import store from '../redux';
// ...
const lng = store.getState().user.language
  ? store.getState().user.language
  : Localization.locale.slice(0, 2);

i18next
  // .use(languageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    resources,
    lng,
  });
 

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

Комментарии:

1. Возможно, вам потребуется создать пользовательский детектор языка: i18next.com/misc/creating-own-plugins#languagedetector

Ответ №1:

Таким PersistGate образом, можно реализовать onBeforeLift метод, ожидая, пока он будет разрешен, прежде чем поднимать состояние «загрузка».

 const onBeforeLift = async () => {
  await initI18Next();
};

export default function App(): React.ReactElement {
  return (
    <Provider store={store}>
      <PersistGate
        loading={<SplashScreen />}
        persistor={persistor}
        onBeforeLift={onBeforeLift}
      >
        <StatusBar hidden />
        <MainNavigation />
      </PersistGate>
    </Provider>
  );
}
 

И в i18n.ts :

 const resources = {
  en: { translation: en },
  fr: { translation: fr },
  he: { translation: he },
};

export const init = () => {
  const lng = store.getState().user.language
    ? store.getState().user.language
    : Localization.locale.slice(0, 2);

  return (
    i18next
      .use(initReactI18next)
      .init({
        fallbackLng: 'en',
        debug: true,
        resources,
        lng,
      })
  );
};

export default i18next;