title: React component not refreshing when redux state has been updated with successful action
body: <p>New to React/Redux combo and trying to work through an issue.</p>
  
  <p>When a user first visits or logs in / a fetch_user api request is made. The intention is that the page would display differently based on their login status. In redux dev tools I can see the state being updated and fields being populated to 'auth' after the initial state, however, while I am in a subcomponent of the app the value is seen as undefined. Please let me know if you need any more information. Thanks in advance. </p>
  
  <pre><code>    // app.js
              const initialState = {};
      const history = createHistory();
      const store = configureStore(initialState, history);
  
      const MOUNT_NODE = document.getElementById('app');
  
      const render = messages =&gt; {
        ReactDOM.render(
          &lt;Provider store={store}&gt;
            &lt;LanguageProvider messages={messages}&gt;
              &lt;ConnectedRouter history={history}&gt;
                &lt;App /&gt;
              &lt;/ConnectedRouter&gt;
            &lt;/LanguageProvider&gt;
          &lt;/Provider&gt;,
          MOUNT_NODE,
        );
      };
  
      // index.js
              class App extends React.Component {
        componentDidMount() {
          console.log('here');
          this.props.fetchUser();
        }
        render() {
          return (
            &lt;ThemeWrapper&gt;
              &lt;AppContext.Consumer&gt;
            ..... 
          App.propTypes = {
              fetchUser: PropTypes.any.isRequired
          };
  
     export default withRouter(connect(null, actions)(App));
  
  
    import { FETCH_USER } from '../actions/types';
  
    export default function (state = null, action) {
      switch (action.type) {
        case FETCH_USER:
          console.log('1');
          return action.payload || false;
        default:
          return state;
      }
    }
      // actions
      export const fetchUser = () =&gt; async dispatch =&gt; {
        const res = await axios.get('/api/current_user');
        // res is the output of the axios request
        dispatch({ type: FETCH_USER, payload: res.data });
      };
  
  // Banner.js - auth = undefined
  render() {
      console.log(this.props);
  // === auth = undefined. I may be accessing it incorrectly
  
  
  const mapStateToProps = state =&gt; ({
      gradient: state.getIn([reducerUI, 'gradient']),
      chat: state.getIn([chatUI, 'chatSelected']),
      auth: state.auth
    });
  
    const BannerMaped = connect(
      mapStateToProps,
    )(Banner);
  
    // configure store
  
        export default function configureStore(initialState = {}, history) {
          // Create the store with two middlewares
          // 1. sagaMiddleware: Makes redux-sagas work
          // 2. routerMiddleware: Syncs the location/URL path to the state
          const middlewares = [sagaMiddleware, routerMiddleware(history), reduxThunk];
  
          const enhancers = [applyMiddleware(...middlewares)];
  
          // If Redux DevTools Extension is installed use it, otherwise use Redux compose
          /* eslint-disable no-underscore-dangle, indent */
          const composeEnhancers =
            process.env.NODE_ENV !== 'production' &amp;&amp;
            typeof window === 'object' &amp;&amp;
            window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
              ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
                  // TODO Try to remove when `react-router-redux` is out of beta, LOCATION_CHANGE should not be fired more than once after hot reloading
                  // Prevent recomputing reducers for `replaceReducer`
                  shouldHotReload: false,
                })
              : compose;
          /* eslint-enable */
          const store = createStore(
            createReducer(),
            fromJS(initialState),
            composeEnhancers(...enhancers),
          );
  
          // Extensions
          store.runSaga = sagaMiddleware.run;
          store.injectedReducers = {}; // Reducer registry
          store.injectedSagas = {}; // Saga registry
  
          // Make reducers hot reloadable, see http://mxs.is/googmo
          if (module.hot) {
            module.hot.accept('./reducers', () =&gt; {
              store.replaceReducer(createReducer(store.injectedReducers));
            });
          }
  
          return store;
        }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/TdNGE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TdNGE.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/KbR4E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KbR4E.png" alt="enter image description here"></a></p>