title: React-Redux: How to update props of component whenever they change?
body: <p>My header component is not not receiving new props until I manually re-render the entire page. And i wonder why?</p>
  <p>Basiclly i have four conditions to render my header: idle, loading, success, failure.</p>
  <ol>
  <li>In idle the user sees the LoggedOutNavbar</li>
  <li>In loading the user sees the LoadingNavbar</li>
  <li>In success the user sees the LoadedNavbar</li>
  <li>In failure the user sees the LoggedOutNavbar</li>
  </ol>
  <p>When the user accesses the login page for the first time, the status is idle. If he then clicks the login button, the login is successful, but the header does not receive the new load and success status as props. So the header remains the same like in the logged out state. However, when the page is manually reloaded and the actions are dispatched again, the new props are available and the new header is displayed. I wonder how I can get the same result without manually reloading the page?</p>
  <pre><code>export class Header extends Component {
  
     componentDidMount() {
      this.props.getProfile();
      this.props.loadUser();
    }
      
      render() {
  
          const {profile} = this.props.profile;
          const isFetching = this.props.isFetching
          const {isAuthenticated} = this.props.auth
  
          if (isFetching === &quot;idle&quot;) return (&lt;LoggedOutNavbar /&gt;)
  
          if (isFetching === &quot;loading&quot; ) return (&lt;Fragment&gt; &lt;LoadingNavbar /&gt; &lt;/Fragment&gt; )
  
          if (isFetching === &quot;success&quot;) return (&lt;LoadedNavbar profile = {profile[0]} isAuthenticated ={isAuthenticated}/&gt;)
  
          if (isFetching === &quot;failure&quot;) return (&lt;LoggedOutNavbar /&gt;)
  
  
    
  }
  }
  
  
  function mapStateToProps(state, ownProps) {
      const auth = state.auth
      const profile = state.profile
      const isFetching = state.profile.isFetching
  
    return { auth, profile, isFetching}
  };
  
  export default connect(
      mapStateToProps,
      { getProfile, loadUser }
  )(Header);
  </code></pre>
  <pre><code>header.js:34 idle    // Logged Out state
  header.js:34 loading  
  header.js:34 success  // Logged in state, after manually rerendering
  header.js:34 success // Logged in state, after manually rerendering
  header.js:34 idle  // Logged Out state
  header.js:34 idle  // Logged in state but header is still in idle
  header.js:34 idle  // Logged in state but header is still in idle
  </code></pre>
  <p><strong>EDIT:</strong>
  When inspecting my Redux Dev Tools, i see that the Profile is is actually not changing from idle to another state. I aussme the getProfile function is not called again after the login.</p>