問題タブ [react-intl]

React、Redux、React-Router、および Intl (react-intl、react-intl-redux、react-router-redux、react-redux) を使用するアプリがあります。基本的なセットアップ、空想は何もないと思います。

(language = locale here) ヘッダーには、アプリの言語を制御できるドロップダウンがあります。アプリの URL には、現在の言語に関する情報も含まれています。

URL がhttp://example.com/en/postヘッダー言語メニューの場合en、選択されたオプションがあります。

ドロップダウン値を変更するたびに、それに応じて URL とヘッダー メニューの両方が変更されます。

その逆も利用可能である必要があります。特定のパス (言語も含まれている) でページをナビゲートするか、単に開くと、intl状態に反映されます。

通常、私は次のようにします：

• 私が使用するURLの変更のためにdispatch(push('/{newLanguage}/...

• 私が使用する intl 状態変更のためにdispatch(updateIntl({ locale, messages }))- アクション作成者 updateIntl は react-intl-redux によって提供されます

しかし、これらの 2 つのアクションをトリガーすることは、2 つのレンダリング (+ いくつかの API インタラクション) を生成する 2 つの状態変更をトリガーするため、私のアプリでは実行できません。

問題は、intl 状態とルーター状態の両方を同期させるために、1 つのアクションのみをトリガーする方法です。または、この問題を解決する 1 つのアクションについて間違っているとしたら、エレガントな解決策は何でしょうか?

考えられる解決策: アクションを作成し、両方をCHANGE_LANGUAGE書き直して、トリガーされたときに状態を調整しますか?intlReducerrouterReducer

UI Util ライブラリの国際化に React-intl を使用しています。ライブラリには i18n というフォルダがあり、ここにさまざまなロケールの json ファイルを配置します。このライブラリのユーザーが追加のロケールのサポートを追加したい場合は、それぞれのロケールのキーと値のペアを含む追加の json ファイルを配置できます。

ただし、React-intl では、事前にそれぞれのロケールの LocaleData をインポートして追加する必要があります。たとえば、

React-intl で、LocaleData を追加して、それぞれのロケールのロケール ライブラリを動的にインポートする方法はありますか?

各コンポーネントを注入せずに API メソッドを呼び出す方法があるかどうか疑問に思っています。

たとえば、 intl.formatMessage を呼び出す関数を提供するようなもの

React Redux ToastrでReact Boilerplateを使用しています。React Intlのメッセージを使用して toastr を呼び出せるようにしたいと考えています。

コンポーネント内で呼び出そうとしましたが、toastr が状態の更新を行っているため、Reacts はそれをアンチパターンとして警告します。私もサガ内で呼び出そうとしましたが、国際メッセージを含める方法はありません。

国際化メッセージでトースターを呼び出し、redux を活用するのに最適な場所はどこですか?

redux と react-intl を使用して、react コンポーネントのテストを作成しようとしています。

しかし、私はこの結果を得ました：

どうすれば修正できますか？

概要

Webpack Dev Server を使用してアプリをロードすると、メッセージが正常に表示されます: \. ただし、アプリケーションをディスクにバンドルしnginx、 を介してバンドルをサーバーに送信すると、バックスラッシュが重複しています: \\。

詳細

react-intl@2.2.3 (現時点では最新) とbabel-plugin-react-intl@2.3.1 (現時点では最新) を使用しています。私の目標は、文字を使用してデフォルトのメッセージを定義し、\任意の方法 ( 、 など) でレンダリングすることFormattedMessageですformatMessage。

Webpack / Babel を使用してアプリをバンドルしています。webpack.config.jsファイルにBabel / react-intl 固有の構成はありませんが、またはDefinePluginに設定process.envするために使用します'development''production'

Webpack Dev Server を使用してアプリをロードすると、メッセージが正常に表示されます: \. ただし、アプリケーションをディスクにバンドルし、 経由nginxでバンドルを提供すると、バックスラッシュが重複しています: \\。ここに次の指示があります: https://github.com/yahoo/babel-plugin-react-intl/issues/13#issuecomment-151944191 4\文字を使用して最終\文字を表示することに関して。

価値のあるものとして、JSX 文字列、JS 文字列、1、2、および 4\文字の使用、および考えられるその他のばかげた組み合わせを使用してみました。

ヒントや提案は大歓迎です。ありがとうございました。

コードサンプル

メッセージの定義方法の例

メッセージをレンダリングする方法の例

別の例も機能しません

さらに別の失敗例: