reactjs - React Redux Router Intl は、intl 状態とルーター状態の間でロケールを同期させます

Question

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

<Provider store={store}>
  <IntlProvider>
    <Router history={history}>
      <Route path="/:language" component={App}>
        ...
      </Route>
    </Router>
  </IntlProvider>
</Provider>

import { intlReducer } from 'react-intl-redux';
import { routerReducer } from 'react-router-redux';

const rootReducer = combineReducers({
  routing: routerReducer,
  intl: intlReducer,
  ...
});

(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