title: React + Redux: Component does not update
body: <p>Trying out React + Redux, and probably am doing something obviously stupid, because a component that fires an action to fetch data over the network does not get updated (re-rendered) when the data is fetched.</p>
  
  <p>Here are the relevant bits of my code:</p>
  
  <p>The top-level index.js serving as an entry point for the app:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  import { createStore, applyMiddleware } from 'redux';
  import { Router, browserHistory } from 'react-router';
  import reduxPromise from 'redux-promise';
  import createLogger from 'redux-logger';
  
  const logger = createLogger();
  
  import routes from './routes';
  import reducers from './reducers';
  
  const createStoreWithMiddleware = applyMiddleware(reduxPromise, logger)(createStore);
  
  ReactDOM.render(
    &lt;Provider store={createStoreWithMiddleware(reducers)}&gt;
      &lt;Router history={browserHistory} routes={routes} /&gt;
    &lt;/Provider&gt;
    , document.querySelector('.container'));
  </code></pre>
  
  <p>Top-level container App:</p>
  
  <pre><code>import React, {Component} from 'react';
  import { bindActionCreators } from 'redux';
  import { connect } from 'react-redux';
  import * as Actions from '../actions';
  import Header from '../components/header';
  import Showcase from '../components/showcase';
  
  function mapStateToProps(state) {
    return {
      resources: state.resources
    }
  }
  
  function mapDispatchToProps(dispatch) {
    return {
      fetchResources: () =&gt; {
        dispatch(Actions.fetchResources());
      }
    }
  }
  
  
  class App extends Component {
  
    render() {
      console.log('props in App', this.props);
      return (
        &lt;div&gt;
          &lt;Header/&gt;
          &lt;Showcase
            fetchResources={this.props.fetchResources}
            resources={this.props.resources}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(App)
  </code></pre>
  
  <p>Component that triggers an action to sends a request for data when it is about to mount and is supposed to show the fetched data:</p>
  
  <pre><code>import React, {Component} from 'react';
  import {connect} from 'react-redux';
  
  class Showcase extends Component {
    constructor(props) {
      super(props);
    }
  
    componentWillMount() {
      this.props.fetchResources();
    }
  
    render() {
      console.log('resources', this.props);
      return (
        &lt;div&gt;
          This is showcase
        &lt;/div&gt;
      );
    }
  }
  
  export default connect(state =&gt; ({resources: state.resources}))(Showcase)
  </code></pre>
  
  <p>Action Creator:</p>
  
  <pre><code>import * as types from '../constants/ActionTypes';
  import axios from 'axios';
  
  export function fetchResources() {
    return {
      type: types.FETCH_FIRST,
      payload: axios.get('/sampledata/1.json')
    }
  }
  </code></pre>
  
  <p>Reducer for the fetch action:</p>
  
  <pre><code>import * as types from '../constants/ActionTypes';
  
  export default function resourcesReducer (state={}, action) {
    switch (action.type) {
      case types.FETCH_FIRST:
        console.log('about to return', Object.assign (state, {resources: action.payload.data }))
        return Object.assign (state, {resources: action.payload.data });
      default:
        return state
    }
  };
  </code></pre>
  
  <p>and finally the root reducer:</p>
  
  <pre><code>import { combineReducers } from 'redux';
  import navigationReducer from './navigation-reducer';
  import resourcesReducer from './resources-reducer';
  
  const rootReducer = combineReducers({
    navigationReducer,
    resourcesReducer
  });
  
  export default rootReducer;
  </code></pre>
  
  <p>So, here is what I am observing. The action to request data is successfully triggered, a request is sent, the reducer receives it when the promise is resolved, and updates the state with the fetched data. At this point, I would expect the top-level <code>App</code> component and the <code>Showcase</code> component to detect that the store has updated, and to re-render, but I do not see it in the console.</p>
  
  <p>Also, I am confused by <code>redux-logger</code>’s console output:</p>
  
  <p><a href="https://i.stack.imgur.com/rXyZU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/rXyZU.png" alt="enter image description here"></a></p>
  
  <p>Specifically, I am surprized to see that the <code>state</code> contains reducers from the rootReducer — I don't know if it's right (an example on <a href="https://github.com/fcomb/redux-logger" rel="noreferrer">Redux logger Github page</a> shows a state without reducers). It also seems surprising that the <code>prev state</code> as reported by <code>redux-logger</code> contains the same <code>resourcesReducer</code> object as the <code>next state</code>, although intuitively I would expect <code>prev state</code> to be more or less empty.</p>
  
  <p>Could you please point out what I am doing wrong and how to get React components respond to the <code>state</code> changes?</p>
  
  <p>==================================================</p>
  
  <p><strong>UPDATED:</strong> </p>
  
  <p>1) Changed the <code>mapStateToProps</code> function in the <code>App</code> component so that it correctly maps to reducer states:</p>
  
  <pre><code>function mapStateToProps(state) {
    return {
      resources: state.resourcesReducer
    }
  }
  </code></pre>
  
  <p>2) Still passing the <code>resources</code> down to the `Showcase component:</p>
  
  <pre><code>  render() {
      console.log('props in App', this.props);
      return (
        &lt;div&gt;
          &lt;Header navigateActions={this.props.navigateActions}/&gt;
          React simple starter
          &lt;Showcase
            fetchResources={this.props.fetchResources}
            resources={this.props.resources}
          /&gt;
        &lt;/div&gt;
      );
  </code></pre>
  
  <p>3) Trying to display <code>resources</code> on the screen by stringifying it to see what’s actually inside this object:</p>
  
  <pre><code>  render() {
      console.log('resources', this.props);
      return (
        &lt;div&gt;
          This is showcase {JSON.stringify(this.props.resources)}
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>See this on the screen: <code>This is showcase {}</code>. The component does not seem to re-render.</p>
  
  <p>Here’s the screenshot of the console showing that App’s props have updated with the values from the <code>next state</code>. Still, that did not cause the component to re-render:</p>
  
  <p><a href="https://i.stack.imgur.com/WFfaO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WFfaO.png" alt="enter image description here"></a></p>
  
  <p><strong>UPDATED AGAIN:</strong> And my javascript-fu was poor, too. I did not quite realize that by returning <code>Object.assign (state, {resources: action.payload.data });</code> I was in fact mutating the state, and that a simple inversion of arguments would let me achieve what I intended. Thanks to <a href="https://stackoverflow.com/questions/33140008/react-redux-store-updates-but-react-does-not">this discussion</a> on SO for enlightenment.</p>