react-redux mapDispatchToProps functions undefined on connected component

Question

It looks like I am supposed to be able to map my dispatch handling functions onto the props of a connected component (in my example List) through the typically named mapDispatchToProps function. In my List component I am confused as to why this.props.a is undefined?

ListContainer.jsx

const mapStateToProps = state => {
  return {
    list: state.list
  }
}

const mapDispatchToProps = dispatch => {
  return  {
    a: () => {}  //simple function just for testing

    //onDelete: (id) => {
    //  dispatch(actionCreators.delete(id));
    //}

  }
}

const ListContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(List);

module.exports = ListContainer;

List.jsx

module.exports = class List extends Component {

  render() {
    let list = this.props.list; //the list is on props as expected
    alert(JSON.stringify(this.props)); //function a is not on props
    ...
    return ...
  }

}

Versions: "react": "^16.0.0", "react-redux": "^5.0.6", "redux": "^3.7.2",

JSON.stringify does not show the functions in the object. Therefore you dont see this.props.a function. Simply call this.props.a function to test. — Prakash Sharma
for the test you may pass null instead mapDispatchToProps to connect function — Alexey Nikonov

Richard Rosario Richard Rosario · Accepted Answer · 2018-07-05T04:56:40

@Prakash Sharma is right.. you did not call the function as props..

//should dispatch "a"

    this.props.a();

    const mapStateToProps = state => {
      return {
        list: state.list
      }
    }

    const mapDispatchToProps = dispatch => {
      return  {
        a: () => {}  //simple function just for testing

        //onDelete: (id) => {
        //  dispatch(actionCreators.delete(id));
        //}

      }
    }

const ListContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(List);

module.exports = ListContainer;

react-redux mapDispatchToProps functions undefined on connected component

2 Answers