title: Redux State Change Not Re-rendering with Immutable JS
body: <p>When my action successfully excutes and my state is returned, with a change, the child component is not re-rendering. I am using Immutable JS to have immutable state objects.</p>
  
  <p>This is the reducer:</p>
  
  <pre><code>const initialState = {
    sectionsArray: [],
  };
  
  export default function seatingChartSections(state = fromJS(initialState), action) {
    switch (action.type) {
      case actionTypes.LOAD_SEATING_CHART_SECTIONS:
        return fromJS({ sectionsArray: action.seatingChartSections });
  
      case actionTypes.CLICK_SECTION:
        return state.updateIn(['sectionsArray'], (list) =&gt; {
          const index = list.findIndex(item =&gt; item.get('_key') === action.section);
          if (list.getIn([index, 'selected']) === true) {
            return list.setIn([index, 'selected'], false);
          }
          return list.setIn([index, 'selected'], true);
        });
  
      default:
        return state;
    }
  }
  </code></pre>
  
  <p>This is the parent component:</p>
  
  <pre><code>class SeatingChartSections extends Component {
    render() {
      return (
        this.props.seatingChartSections.sectionsArray.map(section =&gt; (&lt;SeatingChartSection
          key={section._key}
          section={section}
          onClick={this.selectSection}
        /&gt;))
      );
    }
  }
  
  function mapStateToProps(state) {
    return {
      seatingChartSections: state.seatingChartSections.toJS(),
    };
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(SeatingChartSections);
  </code></pre>
  
  <p>This is the child component:</p>
  
  <pre><code>class SeatingChartSection extends Component {
    constructor(props) {
      super(props);
      if (this.props.section.selected) {
        this.state = {
          fill: '#1aa3ff',
          stroke: '#4d4dff',
        };
      }
      if (!this.props.section.selected) {
        this.state = {
          fill: '#cce6ff',
          stroke: '#4d4dff',
        };
      }
    }
    render() {
      return (
        &lt;polygon
          onClick={this.props.onClick}
          id={this.props.section._key}
          fillOpacity={0.4}
          fill={this.state.fill}
          stroke={this.state.stroke}
          points={this.props.section.points}
        /&gt;
      );
    }
  }
  
  export default SeatingChartSection;
  </code></pre>
  
  <p>What do I need to change so that the child is rerendered and the constructor changes this.state.fill?</p>