title: React Component not updating with state change
body: <p>I currently have a reducer that does a deep copy of state and returns it with the updated value.</p>
  
  <pre><code>function countableItems(state = initialState, action) {
      switch (action.type) {
          case types.ADD_TO_SUM:
              let denomMap = findDenomination(state.denomGroups, action),
                  nestedCopy = Immutable.fromJS(state);
              return nestedCopy.setIn(['denomGroups', denomMap.group, denomMap.key, denomMap.index, 'sum'], parseFloat(action.value)).toJS();
          default:
              return state;
      }
  }
  </code></pre>
  
  <p>In my render function of the display Component I see the correct updated values in <code>this.props.denoms</code> The <code>render()</code> function builds up child <code>&lt;DenomInput&gt;</code> components, and when I set my breakpoints I see the correct data being passed in</p>
  
  <pre><code>render() {
      let denomGroups = this.props.denoms.map((denom, i) =&gt; {
          return (
              Object.keys(denom).map((key) =&gt; {
                  let denoms = denom[key].map((item, i) =&gt; {
                      return &lt;DenomInput denom={item} onDenomChange={this.onDenomChange} key={i}&gt;&lt;/DenomInput&gt;
                  });
                  return (&lt;div className="col"&gt;&lt;h2&gt;{key}&lt;/h2&gt;{denoms}&lt;/div&gt;)
              })
          );
      });
  
      return (
          &lt;div className="countable-item-wrapper"&gt;
              &lt;div className="row"&gt;
                  {denomGroups}
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>However when the <code>&lt;DenomInput&gt;</code> components render it renders the same value as what they were initially set</p>
  
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  
  class DenomInput extends Component {
      constructor(props) {
          super(props);
          this.state = { denom: props.denom }
          this.handleKeyUp = this.handleKeyUp.bind(this);
      }
  
      handleKeyUp = (e) =&gt; {
          this.props.onDenomChange(e.target.value, this.state.denom.name);
      }
  
      render() {
          return (
              &lt;div className="input-group denom"&gt;
                  &lt;span className="input-group-addon"&gt;{this.state.denom.label}&lt;/span&gt;
                  &lt;input
                      type="text"
                      className="form-control"
                      onChange={this.handleKeyUp}
                      value={this.state.denom.sum} /&gt;
  
                  &lt;span className="input-group-addon"&gt;{this.state.denom.count | 0}&lt;/span&gt;
              &lt;/div&gt;
          );
      }
  }
  
  DenomInput.PropTypes = {
      denom: PropTypes.object.isRequired,
      onDenomChange: PropTypes.function
  }
  
  export default DenomInput;
  </code></pre>
  
  <p>What piece am I missing to update the view with React and Redux?</p>