MapStateToProps Returning Null in react-redux

Question

I am trying to learn redux. I have successfully implemented mapDispatchedToProps. But mapStateToProps function is returning Null. My code is given below.

MeatShopReducer

const initial_state = {
  beefs: 20,
  muttons: 30,
  chickens: 40
};

const MeatShopReducer = (state = initial_state, action) => {
  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;

MeatShop.js

import React, { Component } from "react";
import { connect } from "react-redux";
class MeatShop extends Component {
  render() {
    console.log("render fired");
    console.log(this.state);
    return (
      <div>
        <div>Meat Shop Redux</div>
        <table>
          <thead>
            <tr>
              <th>Item</th>
              <th>Unit</th>
              <th>Price</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Beef</td>
              <td>{this.state.beef}</td>
              <td>{this.state.beef}</td>
              <td>
                <button onClick={this.props.ADD_BEEF}>Add</button>
              </td>
            </tr>
            <tr>
              <td>Mutton</td>
              <td>{this.state.mutton}</td>
              <td>{this.state.mutton}</td>
              <td>
                <button>Add</button>
              </td>
            </tr>
            <tr>
              <td>Chicken</td>
              <td>{this.state.chicken}</td>
              <td>{this.state.chicken}</td>
              <td>
                <button>Add</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}
const mapDispatchToProps = dispatch => {
  return {
    ADD_BEEF: () => dispatch({ type: "ADD_BEEF" })
  };
};

const mapStateToProps = state => {
  return {
    beef: state.beefs,
    mutton: state.muttons,
    chicken: state.chickens
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MeatShop);

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.

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.

Answer 1

connect() is a HOC that passes a piece of global state into your component via props. So the local state of your component doesn't have any data.

So instead of calling, for example, this.state.beef try this.props.beef . It should work fine.

Answer 2

While mapping your state to props (via your mapStateToProps function) you're actually providing props to your connected component. You don't use local state in your component.

So you can access your data as:

console.log(this.props.beef);
console.log(this.props.mutton);
console.log(this.props.chicken);