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

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

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

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

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

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

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

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

мое предложение для начального состояния 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- строку-шаблон это позволит вам вводить значения между строками каталога, например:

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

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

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-полиглот поверх обоих Redux и AirBNB в Полиглот.
(Я один из авторов)

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

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

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

Я только когда-либо использовал gettext, поэтому я предвзят.

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

gettext

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

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

1. i18next, С использованием, описанным этим arkency.com сообщение в блоге
2. Джед, С использованием, описанным sentry.io пост и React+Redux пост,

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

i18next имеет React extension развитые сами по себе. Джед не. Караульным.Ио появляются, чтобы использовать пользовательские интеграции Джед с реагировать. Элемент React+Redux post, предлагает использовать

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

кажется, Джед как-то gettext сфокусированная реализация-это выраженное намерение, где как 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 (мое лучшее предположение из чтения руководство):

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
• ЭКСПО.js
• далее.js
• сборник рассказов интеграция
• razzle
• dat
• ...

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

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

Я хотел бы предложить простое решение с помощью create-react-app.

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

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

в основном, мы не меняем язык более одного раза, если когда-либо вообще)

данные перевода помещаются в тот же файл компонента, который использует его, вместе со стилями, html и кодом.

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

import React from 'react';
import {withStyles} from 'material-ui/styles';
import {languageForm} from './common-language';
const {REACT_APP_LANGUAGE: LANGUAGE} = process.env;
export let language; // define and export language if you wish
class Component extends React.Component {
    render() {
        return (
            <div className={this.props.classes.someStyle}>
                <h2>{language.title}</h2>
                <p>{language.description}</p>
                <p>{language.amount}</p>
                <button>{languageForm.save}</button>
            </div>
        );
    }
}
const styles = theme => ({
    someStyle: {padding: 10},
});
// sets laguage at build time
language = (
    LANGUAGE === 'ru' ? { // Russian
        title: 'Транзакции',
        description: 'Описание',
        amount: 'Сумма',
    } :
    LANGUAGE === 'ee' ? { // Estonian
        title: 'Tehingud',
        description: 'Kirjeldus',
        amount: 'Summa',
    } :
    { // default language // English
        title: 'Transactions',
        description: 'Description',
        amount: 'Sum',
    }
);
export default withStyles(styles)(Component);

добавьте переменную языковой среды в свой пакета.json

"start": "REACT_APP_LANGUAGE=ru npm-run-all -p watch-css start-js",
"build": "REACT_APP_LANGUAGE=ru npm-run-all build-css build-js",

вот оно!

также мой оригинальный ответ включал более монолитный подход с одним файлом json для каждого перевод:

lang / ru.json

{"hello": "Привет"}

lib / lang.js

export default require(`../lang/${process.env.REACT_APP_LANGUAGE}.json`);

src / App.jsx

import lang from '../lib/lang.js';
console.log(lang.hello);