title: mapStateToProps not updating component on change
body: <p>New to react/redux. Wondering why my component is not refreshing on the fired action. Also not sure whether reducer is a good place to manipulate the store but it is pure so it should work.</p>
  
  <p>What happens is that action is fired and store is updated. But the clicked item is not updating (props update shoud add class <code>added</code> to it)</p>
  
  <p><strong>Component:</strong></p>
  
  <p>Referencing rcm_data by Id to toggle class <code>added</code>, onClick fire action</p>
  
  <pre><code>import React, { Component } from "react";
  import { connect } from "react-redux";
  import { addRateCard } from "../actions";
  
  import "./RcmEditor.css";
  
  class RcmEditor extends Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      return (
        &lt;table className="slds-table slds-table--cell-buffer slds-table--bordered"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Rate Card Name&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            {group.rateCardIds.map(rcId =&gt; {
              return (
                &lt;tr
                  className={
                    "ed-group-rc " +
                    (this.props.rcm_data[rcId].added ? "added" : "")
                  }
                  key={rcId}
                  onClick={() =&gt;
                    this.props.addRateCard(this.props.rcm_data[rcId])
                  }
                &gt;
                  &lt;td colSpan="100"&gt;{this.props.rcm_data[rcId].Name}&lt;/td&gt;
                &lt;/tr&gt;
              );
            })}
          &lt;/tbody&gt;
        &lt;/table&gt;
      );
    }
  }
  
  const mapDispatchToProps = {
    addRateCard
  };
  
  const mapStateToProps = state =&gt; {
    return { rcm_data: state.rcm_data, group_data: state.group_data };
  };
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(RcmEditor);
  </code></pre>
  
  <p><strong>Actions:</strong></p>
  
  <pre><code>const ADD_RATE_CARD = "ADD_RATE_CARD";
  
  export const addRateCard = rateCard =&gt; ({ type: ADD_RATE_CARD, payload: rateCard });
  </code></pre>
  
  <p><strong>Reducer:</strong></p>
  
  <p>Copy state (just a precaution), increment added_count property of group_data and change added property of rcm_data referenced by action. payload Id, return a new state. Everything seems pure here</p>
  
  <pre><code>const initialState = {
      rcm_data: {},
      group_data: {},
  };
  
  const rootReducer = (state = initialState, action) =&gt; {
      case "ADD_RATE_CARD":
  
          let _state = { ...state };
          let rateCard = action.payload;
  
          _state.group_data[rateCard.GroupName].added_count++;
          _state.rcm_data[rateCard.Id].added = true;
  
          let data = {
              rcm_data: _state.rcm_data,
              group_data: _state.group_data
          };
  
          return { ...state, rcm_data: _state.rcm_data, group_data: _state.group_data };
      default:
          return state;
     }
  };
  
  export default rootReducer;
  </code></pre>