title: how to auto refresh component when redux state get updated
body: <p>I currently store user name in redux store and show it in topbar after user logged in. (Shown in screenshots). However, it do not re-render automatically when redux state gets updated. I still need to do some actions in topbar then username does appear. Otherwise, it does not appear. So the question, how to force to re-render topbar component from my login component.
  Another question: user name will disapprear when refresh page. So is there any option to persist data with redux state? Or it's impossible.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>const Login = () =&gt; {
    ...
    const handleLogin = async googleData =&gt; {
      ...
      //store user name value als application state into redux store
      store.dispatch(nameActionCreator(googleData.profileObj.name));
      ...
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>const TopBar = () =&gt; {
    ...
    return(
      ...
      &lt;h5&gt;store.getState().userNameRecuder.name&lt;/h5&gt;
      ...
    )
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Before login
  <a href="https://i.stack.imgur.com/VXrym.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VXrym.png" alt="before" /></a></p>
  <p>After login
  <a href="https://i.stack.imgur.com/KYjEN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KYjEN.png" alt="after" /></a></p>