title: MapStateToProps Returning Null in react-redux
body: <p>I am trying to learn redux. I have successfully implemented mapDispatchedToProps. But mapStateToProps function is returning Null. My code is given below.</p>
  
  <p><strong>MeatShopReducer</strong></p>
  
  <pre><code>const initial_state = {
    beefs: 20,
    muttons: 30,
    chickens: 40
  };
  
  const MeatShopReducer = (state = initial_state, action) =&gt; {
    switch (action.type) {
      case "ADD_BEEF":
        console.log("action dispatched");
        var new_state = { ...state };
        new_state.beefs = new_state.beefs - 1;
        console.log(new_state);
        //return new_state;
        return new_state;
  
      default:
        console.log("default:");
        console.log(state);
        return state;
    }
  };
  
  export default MeatShopReducer;
  </code></pre>
  
  <p><strong>MeatShop.js</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import { connect } from "react-redux";
  class MeatShop extends Component {
    render() {
      console.log("render fired");
      console.log(this.state);
      return (
        &lt;div&gt;
          &lt;div&gt;Meat Shop Redux&lt;/div&gt;
          &lt;table&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;Item&lt;/th&gt;
                &lt;th&gt;Unit&lt;/th&gt;
                &lt;th&gt;Price&lt;/th&gt;
                &lt;th&gt;Action&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td&gt;Beef&lt;/td&gt;
                &lt;td&gt;{this.state.beef}&lt;/td&gt;
                &lt;td&gt;{this.state.beef}&lt;/td&gt;
                &lt;td&gt;
                  &lt;button onClick={this.props.ADD_BEEF}&gt;Add&lt;/button&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;Mutton&lt;/td&gt;
                &lt;td&gt;{this.state.mutton}&lt;/td&gt;
                &lt;td&gt;{this.state.mutton}&lt;/td&gt;
                &lt;td&gt;
                  &lt;button&gt;Add&lt;/button&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;Chicken&lt;/td&gt;
                &lt;td&gt;{this.state.chicken}&lt;/td&gt;
                &lt;td&gt;{this.state.chicken}&lt;/td&gt;
                &lt;td&gt;
                  &lt;button&gt;Add&lt;/button&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      );
    }
  }
  const mapDispatchToProps = dispatch =&gt; {
    return {
      ADD_BEEF: () =&gt; dispatch({ type: "ADD_BEEF" })
    };
  };
  
  const mapStateToProps = state =&gt; {
    return {
      beef: state.beefs,
      mutton: state.muttons,
      chicken: state.chickens
    };
  };
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(MeatShop);
  </code></pre>
  
  <p>My Understanding so far:
  I commented out the lines in render function where i need to extract value from state. Then i dispatched the action. console.log from the action shows the store is updated.From this i came to decision that store is connected to MyShop.js correctly and also my MapDispatchToAction is also working. </p>
  
  <p>But when i try to extract value from this.state, It gives me null. So mapStateToProps is not working. I am not finding any mistakes in my reducer. I have  also included a default case in my reducer. So it should not fail in initialization phase i guess.</p>