title: react-intl with redux language swicher
body: <p>I'm trying to make a language switcher with a react-inlt and redux, but when i try to switch, then view is not rendered (&lt; FormattedMessage> dosen't change), but redux work and locale in &lt; IntlProvider> is changed. I haven't got any error in chrome console.</p>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { BrowserRouter, Route } from 'react-router-dom';
  import { createStore, applyMiddleware } from 'redux'; 
  import { Provider } from 'react-redux';
  import thunk from 'redux-thunk'; 
  import { addLocaleData } from 'react-intl';
  import en from "react-intl/locale-data/en";
  import pl from "react-intl/locale-data/pl";
  import App from './App';
  import { localeSet } from './actions/locale';
  import rootReducer from './rootReducer';
  ...
  ...
  addLocaleData([...en, ...pl]);
  ...
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  import { Route } from 'react-router-dom';
  import { IntlProvider } from 'react-intl';
  import messages from "./messages";
  ...
  
  class App extends React.Component {
  
    render() {
      const { lang } = this.props;
      return (
        &lt;IntlProvider locale={lang} messages={messages[lang]}&gt;
          &lt;div className="ui container"&gt;
            &lt;TopNavigation /&gt;
          &lt;/div&gt; 
        &lt;/IntlProvider&gt;
      );
    }
  }
  
  function mapStateToProps(state) {
    return {
      lang: state.locale.lang
    }
  }
  
  export default connect(mapStateToProps)(App);
  </code></pre>
  
  <p>TopNavigation.js</p>
  
  <pre><code>import { FormattedMessage } from 'react-intl';
  import { setLocale } from '../../actions/locale';
  ...
  
  class TopNavigation extends React.Component {
  
      render() {
  
          return (
  
            &lt;FormattedMessage id="nav.dashboard" defaultMessage="Dashboard" /&gt;
  
             &lt;a role="button" onClick={() =&gt; this.props.setLocale("en")}&gt;
               EN
             &lt;/a&gt;{" "}
             |
             &lt;a role="button" onClick={() =&gt; this.props.setLocale("pl")}&gt;
               PL
             &lt;/a&gt;
  
          );
      }
  }
  
  export default connect(null, { setLocale })(TopNavigation);
  </code></pre>
  
  <p>messages.js</p>
  
  <pre><code>export default {
      en: {
          'nav.dashboard' : "Dashboard"
      },
      pl: {
          'nav.dashboard' : "Panel Administracyjny"        
      }
  }
  </code></pre>
  
  <p>actions/locale.js</p>
  
  <pre><code>import { LOCALE_SET } from "../types";
  
  export const localeSet = lang =&gt; ({
    type: LOCALE_SET,
    lang
  });
  
  export const setLocale = lang =&gt; dispatch =&gt; {
    localStorage.alhubLang = lang;
    dispatch(localeSet(lang));
  };
  </code></pre>
  
  <p>reducers/locale.js</p>
  
  <pre><code>import { LOCALE_SET } from "../types";
  
  export default function locale(state ={ lang: "pl"}, action = {}) {
      switch(action.type) {
          case LOCALE_SET:
              return { lang: action.lang };
          default: 
              return state;
      }
  }
  </code></pre>
  
  <p>types.js</p>
  
  <pre><code>export const LOCALE_SET = "LOCALE_SET";
  </code></pre>