title: React\Redux render() not being called after change in state
body: <p>I am attempting to populate a dropdown list from the server in a React/Redux project. The dropdown list in defined as a component and embedded in a parent component.</p>
  
  <p>Parent component:</p>
  
  <pre><code>import React from 'react';
  import Form from 'components/Form';
  import { reduxForm } from 'redux-form';
  import { Input } from 'components';
  import FirstFormList from '../FirstFormList/FirstFormList.js';
  import { firstform } from 'redux/modules/firstForm';
  
  class FirstForm extends Form {
    render() {
      const {
        fields: { dateTime }
      } = this.props;
      return (
        &lt;form onSubmit={this.handleApiSubmit(firstform)} className="form-horizontal"&gt;
          {this.renderGlobalErrorList()}
          &lt;Input field={dateTime} label="Time Stamp" /&gt;
          &lt;div className="form-group"&gt;
            &lt;div className="col-md-1" /&gt;
            &lt;label htmlFor="select1" className="col-md-1"&gt;Select Option&lt;/label&gt;
            &lt;div className="col-md-10"&gt;
              &lt;FirstFormList /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="form-group"&gt;
            &lt;div className="col-md-offset-2 col-md-10"&gt;
              &lt;button type="submit" className="btn btn-default"&gt;Submit&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      );
    }
  }
  
  FirstForm = reduxForm({
    form: 'firstform',
    fields: ['dateTime']
  }
  )(FirstForm);
  
  export default FirstForm;
  </code></pre>
  
  <p>The child component FirstFormList</p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  import { fetchfirstformlist } from 'redux/modules/firstFormList';
  
  class FirstFormList extends React.Component {
  
    constructor(props) {
      super(props);
      this.state = {
        items: []
      };
    }
  
    componentDidMount() {
      this.props.fetchfirstformlist();
    }
  
    render() {
      let optionItems = [];
      if (this.props.items !== undefined &amp;&amp; this.props.items !== null) {
        const items = this.props.items;
        optionItems = items.map((item) =&gt;
          &lt;option key={item.value}&gt;{item.label}&lt;/option&gt;
        );
      }
      return (
        &lt;div&gt;
          &lt;select className="form-control"&gt;
            {optionItems}
          &lt;/select&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default connect(
    state =&gt; ({ items: state.items }),
    { fetchfirstformlist })(FirstFormList);
  </code></pre>
  
  <p>The child component reducer:</p>
  
  <pre><code>export const FIRSTFORMLISTFETCH_START = 'react/firstform/FIRSTFORMGETLIST_START';
  export const FIRSTFORMLISTFETCH_COMPLETE = 'react/firstform/FIRSTFORMGETLIST_COMPLETE';
  export const FIRSTFORMLISTFETCH_ERROR = 'react/firstform/FIRSTFORMGETLIST_ERROR';
  
  const initialState = {
  };
  
  export default function reducer(state = initialState, action = {}) {
    switch (action.type) {
      case FIRSTFORMLISTFETCH_COMPLETE:
        return {
          ...state,
          items: action.result.items
        };
      default:
        return state;
    }
  }
  
  export function fetchfirstformlist() {
    return {
      types: [FIRSTFORMLISTFETCH_START, FIRSTFORMLISTFETCH_COMPLETE, FIRSTFORMLISTFETCH_ERROR],
      promise: (client) =&gt; client.post('/api/firstform/getfirstformlist')
    };
  }
  </code></pre>
  
  <p>After the componentDidMount fires can see the items returned by the server in the state if I set a break point in the FirstFormList compoenent:</p>
  
  <pre><code>export default connect(
    state =&gt; ({ items: state.items }),
    { fetchfirstformlist })(FirstFormList);
  </code></pre>
  
  <p>However the render() of the component does not fire after the items are attached to the state.</p>