title: React/Redux - Dispatch not updating view
body: <p>First small react/redux project to learn both react and redux.</p>
  
  <p>The onClick event on the button element fires as I can see the value in the console (in the reducer file). However, the view is not updating.</p>
  
  <p>Yes, I have looked online, and I have been stuck on this issue for a full day.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Thanks in advance.</p>
  
  <p>PanelContainer.js file:</p>
  
  <pre><code>    class PanelContainer extends React.Component {
  
          constructor(){
            super();
            this.state = {
              color: new Color()
            }
          }
  
         render(){
            return (
             &lt;div class="container"&gt;
               &lt;Row&gt;
                 &lt;Cell cols={`col-sm-12 col-md-3 col-lg-3`}&gt;
                   &lt;Panel&gt;
                     &lt;PanelBody color={this.state.color.generateColor(new Gray())}&gt;
                        &lt;Title title={this.props.follower.count} /&gt;
                        &lt;p&gt;{this.props.follower.description}&lt;/p&gt;
                        &lt;p&gt;&lt;button class="btn btn-primary" onClick={() =&gt; this.props.getFollower()}&gt;Update&lt;/button&gt;&lt;/p&gt;
                     &lt;/PanelBody&gt;
                  &lt;/Panel&gt;
                &lt;/Cell&gt;
              &lt;/Row&gt;
           &lt;/div&gt;
          );
        }
      }
  
      const mapStateToProps = (state) =&gt; {
         return {
           follower: state.followerReducer
         };
      };
  
      const mapDispatchToProps = (dispatch) =&gt; {
        return {
          getFollower: () =&gt; {
            dispatch(getFollower());
          },
          changeFollower: () =&gt; {
            dispatch(changeFollower());
          }
        }
      }
  
      export default connect(mapStateToProps, mapDispatchToProps)(PanelContainer);
  </code></pre>
  
  <p>FolloweReducer.js file:</p>
  
  <pre><code>export default (state = { follower: { count: 0, description: "Default description" } }, action) =&gt; {
    switch(action.type){
      case "GET_FOLLOWER":
        state = { ...state, follower: action.payload };
        console.log("GET FOLLOWER", state);
        break;
      case "CHANGE_FOLLOWER":
        state = { ...state, follower: action.payload };
        console.log("CHANGE FOLLOWER", state);
        break;
      default:
        break;
    }
    return state;
  };
  </code></pre>
  
  <p>FollowerAction.js file:</p>
  
  <pre><code>export function getFollower() {
    return {
      type: "GET_FOLLOWER",
      payload: {
        count: 20,
        description: "New followers added this month"
      }
    }
  }
  
  export function changeFollower(){
    return {
      type: "CHANGE_FOLLOWER",
      payload: {
        count: 50,
        description: "Changed Followers!!!"
      }
    }
  }
  </code></pre>
  
  <p>Store.js file:</p>
  
  <pre><code>const store = createStore(combineReducers({
    followerReducer: followerReducer
  }));
  
  export default store;
  </code></pre>
  
  <p>App.js file:</p>
  
  <pre><code>import React from "react";
  import ReactDom from "react-dom";
  import {Provider} from "react-redux";
  
  import PanelContainer from "./panel/PanelContainer";
  import store from "./shared/Store";
  
  let app = document.getElementById("app");
  ReactDom.render(
    &lt;Provider store={store}&gt;
      &lt;PanelContainer /&gt;
    &lt;/Provider&gt;,
    app
  );
  </code></pre>