title: The problem with redux not working on button click
body: <p>I am new to Redux and was learning how to use it with React. Basically, I did everything correctlyin terms of setting up Redux with react app but when I click on  button increment I expect displaying counter to increment by one. But when I do that nothing happens and, certainly, I have checked dispatch and action being sent but basically all is ok. Thus I truly need your help guys here is the code I am using:</p>
  
  <p>index.js</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import "./index.css";
  import App from "./App";
  import registerServiceWorker from "./registerServiceWorker";
  import { createStore } from "redux";
  import reducer from "./store/reducer";
  import { Provider } from "react-redux";
  
  const store = createStore(reducer);
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;App /&gt;
    &lt;/Provider&gt;,
    document.getElementById("root")
  );
  registerServiceWorker();
  </code></pre>
  
  <p>reducer.js</p>
  
  <pre><code>const initialState = {
    counter: 0
  };
  
  const reducer = (state = initialState, action) =&gt; {
    if (action.type === "INCREMENT") {
      return { counter: state.counter + 1 };
    }
  
    return state;
  };
  
  export default reducer;
  </code></pre>
  
  <p>counter.js</p>
  
  <pre><code>import React, { Component } from "react";
  import { connect } from "react-redux";
  
  import CounterControl from "../../components/CounterControl/CounterControl";
  import CounterOutput from "../../components/CounterOutput/CounterOutput";
  
  class Counter extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;CounterOutput value={this.props.ctr} /&gt;
          &lt;CounterControl
            label="Increment"
            clicked={() =&gt; this.props.onIncrement}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = state =&gt; {
    return { ctr: state.counter };
  };
  
  const mapDispatchToProps = dispatch =&gt; {
    return {
      onIncrement: () =&gt; dispatch({ type: "INCREMENT" })
    };
  };
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(Counter);
  </code></pre>