ReactandReduxアプリにi18nYourselfを追加する

getdocs

2年前

Reactで最初に驚いたことの1つは、すべてがコンポーネントであるということです。表面的には単純に聞こえるかもしれませんが、機能的なもの（フォーム管理、i18n（国際化）、ルーティング、状態など）については、私にはあまり自然に感じられず、 -ビジュアル機能のみのコンポーネント。

通常、他のUIライブラリ/フレームワークには、ルーターAPI、フォームAPIなどの機能ロジックを処理するためのAPIベースの方法があります。それらは、それらの場合のために独自のAPIまたはインスタンスを拡張する方法を提供します。

Reactのi18nソリューションを調べたところ、ほとんどのソリューションが翻訳コンポーネントを使用していることがわかりました。特に、より多くの機能が必要な大規模なプロジェクトには最適ですが、私のユースケースは非常に単純だったので、自分で行うことにしました。この投稿では、私がそれをどのように行ったかについて説明します。

React用のi18nライブラリの1つを試すことに興味がある場合は、i18nextとreact-i18nextをカバーするこの投稿をチェックしてください。

リテラルレデューサー

ここで紹介するソリューションは、 Redux を使用しています。これは、すでに優れた状態のコンテナーであるためですが、必要に応じて、リテラル用のコンテナーを自分で作成することもできます。メカニズムは似ています。

まず、リテラルを格納するためのReduxの状態として store/literals.jsを作成しましょう。

store /literals.js

const defaultState = {};

const LOAD_LITERALS = "LOAD_LITERALS";

export default (state = defaultState, { type, payload }) => {
  switch (type) {
    case LOAD_LITERALS:
      return payload;
    default:
      return state;
  }
};

export const loadLiterals = literals => ({
  type: LOAD_LITERALS,
  payload: literals,
});

すでにReduxに精通している場合は、ここで特別なことは何もありません。リテラルの状態全体を置き換えるレデューサーがあり、 loadLiterals それらを設定するアクションクリエーター。

React / Reduxアプリでは、セットアップは通常、ReactReduxのProviderコンポーネントを使用するindex.jsファイルから始まります。

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";

import App from "./App";
import store from "./store";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

ここ、 store Reduxストアを作成したファイルから取得され、ルートレデューサーを次のような関数に渡します。 combineReducers:

store / index.js

import { createStore, combineReducers } from "redux";
import literals from "./literals.js";

const rootReducer = combineReducers({
  literals,
  // other reducers...
});

export createStore(rootReducer);

まだ特別なことは何もありません。Reduxストアを作成するための通常の手順だけです。

リテラルのロード

i18nロジックを整理するために、次の構造のフォルダーを作成しましょう。

+ i18n
  - index.js
  - en.json
  - es.json
  ....

JSONファイルには、言語リテラルを含むキー値データが含まれています。

i18n / en.json

{
  "app_greet": "Hey Joe!"
}

index.js ファイルに関しては、特定の言語のリテラルを返す関数を公開できます。

i18n / index.js

import en from "./en.json";
import es from "./es.json";

const langs = {
  en,
  es
};

export default function (lang = "en") {
  return langs[lang];
};

アイデアは、アプリの早い段階でリテラルをロードすることです。おそらく、他のものも同時に初期化して構成する必要があります。そのためにinit.jsファイルを作成することもありますが、必要に応じて作成してください。

ただし、ストアがすでに作成されていることを確認する必要があります。ストアを作成した直後に、index.jsでそれを実行しましょう。

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";

import App from "./App";
import { loadLiterals } from "store/literals";
import store from "./store";
import loadLang from "./i18n";

const lang = loadLang();
store.dispatch(loadLiterals(lang))

ReactDOM.render(
  
    <App />
  ,
  document.getElementById("root")
);

ご覧のとおり、 loadLiterals 関数。コンポーネントの外部からReduxアクションを呼び出すには、 store.dispatch インスタンスメソッド。

リテラルをロードするには、これで十分です。次に、どのコンポーネントでも、接続機能を使用してストアの一部を取得できます。基本的な例は次のとおりです。

index.js

import React from "react";
import { connect } from "react-redux";

const App = ({ literals }) => (
  <div>
    {literals.app_greet}
  </div>
);

const mapStateToProps = ({ literals }) => ({
  literals
});

export default connect(mapStateToProps)(App);

遅延読み込みリテラル

さらに一歩進めたい場合は、デフォルトのエクスポートをで変更できます。 i18n/index.js JavaScript動的インポート機能を使用してリテラルを遅延ロードするには：

i18n / index.js

export default function (lang = "en") {
  return import(`./${lang}.json`);
};

関数が単純になるだけでなく、リテラルはオンデマンドで遅延読み込みされるため、バンドルサイズが小さくなり、アプリの読み込みが速くなります。

動的インポートはpromiseを返すため、ストアでリテラルをロードする方法を次のように更新する必要があります。

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";

import App from "./App";
import { loadLiterals } from "store/literals";
import store from "./store";
import loadLang from "./i18n";

loadLang().then(lang => store.dispatch(loadLiterals(lang)));

ReactDOM.render(
  
    <App />
  ,
  document.getElementById("root")
);