Получить языковой стандарт из базы данных вместо браузера i18next - PullRequest
Новая
       3

Получить языковой стандарт из базы данных вместо браузера i18next

3 голосов
/ 24 января 2020

В настоящее время я получаю локаль из браузера пользователя. Теперь пользователь может установить предпочитаемый язык в своем профиле, он сохраняется в базе данных. Я хотел бы получить это значение из базы данных и установить правильный языковой стандарт для i18next. Я прочитал кое-что о собственной функции обнаружения здесь: https://github.com/i18next/i18next-browser-languageDetector. Но я не совсем уверен, правильно ли это использовать. Мой файл i18n. js в настоящее время настроен так: 

import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { reactI18nextModule } from 'react-i18next';
import moment from 'moment';

export const i18nInit = (callback = () => { }) =>
  // for easy overview use: https://devhints.io/moment its better than official docs:
  moment.defineLocale('nl-custom', {
    parentLocale: 'nl',
    longDateFormat: {
      LT: 'HH:mm',
      LTS: 'HH:mm:ss',
      L: 'D MMM', // need this format to display dates in past year(s)
      LL: 'D MMMM YYYY', // need this format to display dates in the current year
      LLL: 'YYYY-MM-DD HH:mm', // need this format as input for the date picker
      LLLL: 'dddd D MMMM YYYY HH:mm',
    },
  }) &&
  moment.defineLocale('en-custom', {
    parentLocale: 'en',
    longDateFormat: {
      LT: 'HH:mm',
      LTS: 'HH:mm:ss',
      L: 'MMM D',
      LL: 'MMMM D YYYY', // need this format to display dates in the current year
      LLL: 'YYYY-MM-DD HH:mm', // need this format as input for the date picker
      LLLL: 'MMMM dddd D YYYY HH:mm',
    },
  }) &&
  i18n
    // load translation using xhr -> see /public/locales
    // learn more: https://github.com/i18next/i18next-xhr-backend
    .use(Backend)
    // detect user language
    // learn more: https://github.com/i18next/i18next-browser-languageDetector
    .use(LanguageDetector)
    // pass the i18n instance to the react-i18next components.
    // Alternative use the I18nextProvider: https://react.i18next.com/components/i18nextprovider
    .use(reactI18nextModule)
    // init i18next
    // for all options read: https://www.i18next.com/overview/configuration-options
    .init(
      {
        fallbackLng: 'en',
        ns: ['actionpoints', 'common', 'menu', 'messages', 'overview', 'settings', 'shepherdTour', 'users', 'profile', 'meetingtypes'],
        defaultNS: 'common',
        whitelist: ['nl', 'en'],
        backend: {
          // Path where resources get loaded from, or a function
          // returning a path:
          // function(lngs, namespaces) { return customPath; }
          // the returned path will interpolate lng, ns if provided like giving a static path
          loadPath: '/locales/{{lng}}/{{ns}}.json',
        },

        load: 'currentOnly',
        debug: false,

        interpolation: {
          escapeValue: false, // not needed for react as it escapes by default
        },

        // special options for react-i18next
        // learn more: https://react.i18next.com/components/i18next-instance
        react: {
          wait: true,
        },
      },
      callback
    );

export default i18nInit();

Возможно ли добавить сюда функцию, которая выбирает значение языка из базы данных и, если он не установлен, возвращается к локали браузера?

Ответы [ 2 ]

2 голосов
/ 24 января 2020

i18next-browser-languageDetector определяет язык браузера пользователя, он может отличаться от значения, хранящегося в БД.

Вы можете сделать вызов Api на сервер, чтобы получить язык пользователя, если он не установлен, используйте i18next-browser-languageDetector как запасной вариант.

Таким образом, код должен выглядеть следующим образом 

export const i18nInit = async (callback = () => { }) => {
  const {lang} = await axios.get('/user-lang');

  const i18nConfig = i18n
    .use(Backend)
    .use(reactI18nextModule);

  if(!lang) {
    i18nConfig.use(LanguageDetector);
  }

  i18nConfig.init({
    lng: lang || undefined // if it has value, it will use this lang, if not, it is undefined as a default value of `lng`
    ...
  });
}

Если вы хотите go «модно», вы можете написать собственный асин c язык детектор, что-то вроде этого: 

module.exports = exports = function(fallback){
  return {
    type: 'languageDetector',
    async: true,
    init: () => {},
    detect: async function(callback){
      try {
        await axios.get('user-lang')
          .then(language => {
            if(language){
              return callback(language)
            }

            return callback();
          })
      } catch(error){
        callback();
      }

    },
    cacheUserLanguage: function(language){
      // ... cache users lang
    }
  }
};

На основе i18next-реакции-native-asyn c -хранилище

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

В настоящее время я пытаюсь установить для параметров languagedetector значение: 

const options = {
  order: ['localStorage', 'navigator'],

  lookupLocalStorage: 'i18nextLng',
}

Поэтому я могу сначала сделать вызов axios, а затем установить значение в localStorage. Если значение не установлено в localStorage, оно должно выглядеть в navigator. Если у кого-то есть лучший ответ, я отмечу ваш как принятый, я обновлю этот ответ позже, когда он сработает.

...