React + Redux: Component does not update
<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>