title: React Redux Router Intl keep locale synced between intl state and router state
body: <p>I have an app using React, Redux, React-Router and Intl (also react-intl, react-intl-redux, react-router-redux, react-redux). The basic setup, nothing fancy, I guess.</p>
  
  <pre><code>&lt;Provider store={store}&gt;
    &lt;IntlProvider&gt;
      &lt;Router history={history}&gt;
        &lt;Route path="/:language" component={App}&gt;
          ...
        &lt;/Route&gt;
      &lt;/Router&gt;
    &lt;/IntlProvider&gt;
  &lt;/Provider&gt;
  
  import { intlReducer } from 'react-intl-redux';
  import { routerReducer } from 'react-router-redux';
  
  const rootReducer = combineReducers({
    routing: routerReducer,
    intl: intlReducer,
    ...
  });
  </code></pre>
  
  <p>(language = locale here)
  In the header, I have a dropdown from which you can control the language of the app. The url of the app also contains info about the current language.</p>
  
  <p>If the url is <code>http://example.com/en/post</code> the header language menu has <code>en</code> as the selected option.</p>
  
  <p>Whenever I change the dropdown value, both the url and header menu should change accordingly.</p>
  
  <p>The reverse should also be available: navigating or simply opening a page at a certain path (also having the language included) would be reflected in the <code>intl</code> state.</p>
  
  <p>Normally I would do it like this:</p>
  
  <ul>
  <li><p>for the url change I use <code>dispatch(push('/{newLanguage}/...</code></p></li>
  <li><p>for the intl state change I use <code>dispatch(updateIntl({ locale, messages }))</code> - the action creator updateIntl is provided by react-intl-redux</p></li>
  </ul>
  
  <p>But triggering these 2 actions would not be viable for my app, since it would trigger 2 state changes which would generate 2 renders (+some api interactions)</p>
  
  <p>The question is how do I trigger only one action in order to have both the intl state and the router state in sync? Or if maybe I'm wrong about one action solving this issue, then what would an elegant solution be?</p>
  
  <hr>
  
  <p>possible solution: create an action <code>CHANGE_LANGUAGE</code> and rewrite both <code>intlReducer</code> and <code>routerReducer</code> to adjust the state when it is triggered?</p>