Использование async / await для динамического импорта локалей на addLocaleData - PullRequest
Новая
       7

Использование async / await для динамического импорта локалей на addLocaleData

0 голосов
/ 27 декабря 2018

У меня есть «внешний» intl-провайдер, потому что мне приходится обрабатывать некоторые метки вне реагирующих компонентов.Я пытаюсь динамически загрузить локали, не используя операторы require, и у меня возникла проблема, я не уверен, почему это происходит.Итак, следующий код работает: 

//intlProvider.js
import { IntlProvider, addLocaleData } from 'react-intl';
import Locale from '../../../../utils/locale';

const locale = Locale.getLocale();
addLocaleData(require(`react-intl/locale-data/${locale}`));
const messages = Locale.getMessages('prot');
const intlProvider = new IntlProvider({ locale, messages });
const { intl } = intlProvider.getChildContext();

export default intl;

, затем я читаю intl в файле sharedMessages.js: 

import { defineMessages } from 'react-intl';
import intl from '../components/i18n/Intl';

const messages = defineMessages({
  interest: {
    id: 'sharedMessages.rate.label',
    defaultMessage: 'Interest',
  },
  bank: {
    id: 'sharedMessages.bank.label',
    defaultMessage: 'Bank',
  },
});
function prepareSharedMessages() {
  const msgsObj = {};
  Object.keys(messages).forEach(item => {
    msgsObj[item] = intl.formatMessage(messages[item]);
  });
  return msgsObj;
}
const sharedMessages = prepareSharedMessages();

export default sharedMessages;

Приведенный выше код работает нормально, но так как я хочу избавитьсяоператора require в этой строке (поскольку динамический импорт значительно увеличивает пакет): 

addLocaleData(require(`react-intl/locale-data/${locale}`));

Я попытался заменить его на: 

(async localeCode => {
  const localeData = await import(`react-intl/locale-data/${localeCode}`);
  addLocaleData(localeData.default);
})(locale);

Ожидаемое поведение Я ожидаю, что локаль будет загружена правильно, но, очевидно, приложение пытается получить ее раньше, чем должно.Поскольку я использую async / await , я ожидаю, что он будет установлен до того, как остальная часть приложения попытается его использовать.(Если бы это было внутри реагирующих компонентов, я мог бы использовать componentDidMount , чтобы вызвать локаль, но как мне добиться этого поведения для нереагирующих компонентов?)

Текущее поведение После замены require для оператора import, упомянутого выше, я получаю предупреждение response-intl:

[React Intl] Отсутствуют данные локали для локали: "de".Использование локали по умолчанию: «en» в качестве запасного.

Мое окружение:

  • реагировать-intl 2.7.0
  • реагировать16.0.0
  • узел 9.10.0

ОС: macOS Mojave 10.14

Версия браузера: Chrome 71.0.3578.98 (официальная сборка) (64-битная версия)

...