Приложения React / Redux и многоязычные (интернационализация) - Архитектура

Из моего опыта лучший подход заключается в создании состояния i18n redux и использования его по многим причинам:

1- Это позволит вам передать начальное значение из базы данных, локального файла или даже из механизма шаблона, такого как ejs или jade

2- Когда пользователь меняет язык, вы можете изменить весь язык приложения, даже не обновляя интерфейс.

3- Когда пользователь меняет язык, это также позволит вам извлечь новый язык из api, локального файла или даже из констант

4- Вы также можете сохранить другие важные вещи со строками, такими как часовой пояс, валюта, направление (RTL/LTR) и список доступных языков

5- Вы можете определить язык изменений как нормальное действие сокращения

6- Вы можете иметь свои внутренние и внешние строки в одном месте, например, в моем случае я использую i18n-node для локализации и когда пользователь меняет язык ui, я просто делаю обычный вызов api, а в backend я возвращаю i18n.getCatalog(req), это вернет все пользовательские строки только для текущего языка

Мое предложение для начального состояния i18n:

{
  "language":"ar",
  "availableLanguages":[
    {"code":"en","name": "English"},
    {"code":"ar","name":"عربي"}
  ],
  "catalog":[
     "Hello":"مرحباً",
     "Thank You":"شكراً",
     "You have {count} new messages":"لديك {count} رسائل جديدة"
   ],
  "timezone":"",
  "currency":"",
  "direction":"rtl",
}

Дополнительные полезные модули для i18n:

1- string-template, это позволит вам вводить значения между строками вашего каталога, например:

import template from "string-template";
const count = 7;
//....
template(i18n.catalog["You have {count} new messages"],{count}) // لديك ٧ رسائل جديدة

2- human-format этот модуль позволит вам преобразовать число в/из удобочитаемой строки, например:

import humanFormat from "human-format";
//...
humanFormat(1337); // => '1.34 k'
// you can pass your own translated scale, e.g: humanFormat(1337,MyScale)

3- momentjs самые известные даты и время npm-библиотеки, вы можете перевести момент, но у него уже есть встроенный перевод просто вам необходимо передать текущий язык состояния, например:

import moment from "moment";

const umoment = moment().locale(i18n.language);
umoment.format('MMMM Do YYYY, h:mm:ss a'); // أيار مايو ٢ ٢٠١٧، ٥:١٩:٥٥ م

Решение антуан работает отлично, но есть некоторые оговорки:

• Он напрямую использует контекст React, который я избегаю, когда уже использую Redux
• Он импортирует непосредственно фразу из файла, что может быть проблематичным, если вы хотите получить нужный язык во время выполнения, на стороне клиента
• Он не использует библиотеку i18n, которая легка, но не дает вам доступа к удобным функциям перевода, таким как плюрализация и интерполяция.

Вот почему мы построили redux-polyglot поверх Redux и AirBNB Polyglot.
(Я один из авторов)

Он обеспечивает:

• редуктор для хранения языка и соответствующих сообщений в вашем магазине Redux. Вы можете предоставить оба:
  • промежуточное программное обеспечение, которое вы можете настроить, чтобы поймать определенное действие, вычесть текущий язык и получить/получить связанные сообщения.
  • прямая отправка setLanguage(lang, messages)
• a getP(state), который извлекает объект P, который предоставляет 4 метода:
  • t(key): оригинальная функция многоугольника T
  • tc(key): капитализированный перевод
  • tu(key): перевод с верхним расположением
  • tm(morphism)(key): персонализированный переворот в переводе
• a getLocale(state) селектор для получения текущего языка
• a translate компонент более высокого порядка для улучшения ваших компонентов React, введя объект P в реквизитах

Пример простого использования:

отправить новый язык:

import setLanguage from 'redux-polyglot/setLanguage';

store.dispatch(setLanguage('en', {
    common: { hello_world: 'Hello world' } } }
}));

в компоненте:

import React, { PropTypes } from 'react';
import translate from 'redux-polyglot/translate';

const MyComponent = props => (
  <div className='someId'>
    {props.p.t('common.hello_world')}
  </div>
);
MyComponent.propTypes = {
  p: PropTypes.shape({t: PropTypes.func.isRequired}).isRequired,
}
export default translate(MyComponent);

Скажите, пожалуйста, если у вас есть вопрос/предложение!

Из моих исследований в этом, как представляется, существуют два основных подхода, которые используются для i18n в JavaScript: ICU и gettext.

Я только использовал gettext, поэтому я смещен.

Что меня поражает, так это бедная поддержка. Я родом из мира PHP, CakePHP или WordPress. В обеих этих ситуациях базовым стандартом является то, что все строки просто окружены __(''), а затем вниз по линии вы легко получаете переводы с помощью файлов PO.

Gettext

Вы получаете информацию о sprintf для форматирования строк, а файлы PO будут легко переведены тысячами различных агентств.

Есть два популярных варианта:

• i18next, с использованием описанного arkency. com blog post
• Jed, с использованием описанного часового. io post и React + Redux post,

Оба имеют поддержку стиля gettext, форматирование строк в стиле sprintf и импорт/экспорт в файлы PO.

i18next имеет React extension, разработанный ими самим. Джед не делает. Sentry.io, похоже, использует пользовательскую интеграцию Jed с React. React + Redux post, предлагает использовать

Инструменты: jed + po2json + jsxgettext

Однако Jed кажется более ориентированной на контекстно-зависимую реализацию - то есть она выражает намерение, где, поскольку i18next просто имеет это как вариант.

ICU

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

Популярным вариантом для этого является messageformat.js. Вкратце обсужден этот учебник по блогу sentry.io. messageformat.js фактически разработан тем же человеком, который написал Jed. Он предъявляет довольно жесткие претензии в отношении использования ICU:

Jed - это функция, на мой взгляд. Я рад исправить ошибки, но, как правило, мне не интересно добавлять больше в библиотеку.

Я также поддерживаю messageformat.js. Если вам не нужна конкретная реализация gettext, я могу предложить вместо этого использовать MessageFormat, так как она лучше поддерживает множественные числа/пол и имеет встроенные данные локали.

Грубое сравнение

gettext с помощью sprintf:

i18next.t('Hello world!');
i18next.t(
    'The first 4 letters of the english alphabet are: %s, %s, %s and %s', 
    { postProcess: 'sprintf', sprintf: ['a', 'b', 'c', 'd'] }
);

messageformat.js(мое лучшее предположение от чтения guide):

mf.compile('Hello world!')();
mf.compile(
    'The first 4 letters of the english alphabet are: {s1}, {s2}, {s3} and {s4}'
)({ s1: 'a', s2: 'b', s3: 'c', s4: 'd' });

Если еще не сделано, посмотрев https://react.i18next.com/, это может быть хорошим советом. Он основан на i18next: узнайте один раз - переводите всюду.

Ваш код будет выглядеть примерно так:

<div>{t('simpleContent')}</div>
<Trans i18nKey="userMessagesUnread" count={count}>
  Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
</Trans>

Поставляется с образцами для:

• WebPack
• CRA
• expo.js
• next.js
• интеграция сборника рассказов
• кутерьмы
• Дат
• ...

https://github.com/i18next/react-i18next/tree/master/example

Кроме того, вы должны также рассмотреть рабочий процесс во время разработки, а затем для своих переводчиков → https://www.youtube.com/watch?v=9NOzJhgmyQE