Как я могу получить доступ к intl.formatMessage () в магазине mobx в приложении reactJS?

Question

У меня есть два JSON файла с именами 'en. json' и 'fr. json' , которые имеют все переводы.

ru. json

{ "General.LearnMore": "Learn More" }

У меня есть хранилище mobx (файл .ts), и я хочу получить доступ к intl.formatMessage() в этом классе.

Это проще в функциональных компонентах. Я могу использовать useIntl() ловушку, но как я могу сделать то же самое в файле хранилища (некомпонентном).

Когда я пишу следующий код в файле хранилища:

const messages = defineMessages({
  SMS: {
    id: 'General.LearnMore',
  },
});

const cache = createIntlCache();
const locale = localStorage.getItem('locale')!;
const intl = createIntl({ locale, messages: {} }, cache);
console.log(intl.formatMessage({ id: 'General.select' }));
console.log(intl.formatMessage({ id: messages.sms.id }));

Выдает эту ошибку:

Чего мне не хватает и как я могу это исправить? Пожалуйста, помогите!

Answer 1

В createIntl вы передаете пустой объект messages, поэтому intl не находит идентификаторы.

Чтобы исправить, импортируйте en. json:

import enMessages from '../path/to/en.json'

и передать его на cretaeIntl:

const intl = createIntl({ locale, messages: enMessages }, cache);

Если вы создали объект сообщений с defineMessages только для того, чтобы получить значение из intl - вы можете удалить его, он не ' t предоставить доступ к файлам значений ключа (createIntl не получает автоматически данные intlProvider, требуется полная инициализация с locale и messages)

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

Надеюсь, это поможет!