ReactJS – React-Redux: Can’t find MapDispatchToprops

import React from'react';
 import {addHighlight , deleteHighlight, selectHighlight} from'actions/highlight';
 import {connect} from'react-redux';
 import jquery from'jquery';
 import {styles} from'./ styles.scss';

 const mapDispatchToProps = dispatch => {
 return {
 onHighlight: (start, end, selectedText) => {
 dispatch(addHighlight( start, end, selectedText));
 },
 onDeleteHighlight: (source) => {
 dispatch(deleteHighlight(source));
 },
 onSelectHighlight: (source) => {
 dispatch(selectHighlight(source));
 }
 };
 }

 const mapStateToProps = state => {< br /> return {highlights: state.highlights,
 currentTopic: state.currentTopic,
 selectedHighlight: state.selectedHighligh t,};
 }

 ...
 Other code about Highlight object 
 ...

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

import {bindActionCreators} from'redux'

const mapDispatchToProps = dispatch => {
 return bindActionCreators({ 
 onHighlight: addHighlight,
 onDeleteHighlight: deleteHighlight,
 onSelectHighlight: selectHighlight
 }, dispatch);
 }

< p>My impression is that the methods added to mapDispatchToProps should be accessible by this.props. When I call these methods, “Uncaught TypeError: this.props.onHighlight is not a function” is raised.
Does anyone know what happened? I have been trying a bunch of different alternatives for mapDispatchToProps, but none of them work.

import React from'react';
 import {addHighlight , deleteHighlight, selectHighlight} from'actions/highlight';
 import {connect} from'react-redux';
 import jquery from'jquery';
 import {styles} from'./ styles.scss';

 const mapDispatchToProps = dispatch => {
 return {
 onHighlight: (start, end, selectedText) => {
 dispatch(addHighlight( start, end, selectedText));
 },
 onDeleteHighlight: (source) => {
 dispatch(deleteHighlight(source));
 },
 onSelectHighlight: (source) => {
 dispatch(selectHighlight(source));
 }
 };
 }

 const mapStateToProps = state => {< br /> return {highlights: state.highlights,
 currentTopic: state.currentTopic,
 selectedHighlight: state.selectedHighlight,} ;
 }

 ...
 Other code about Highlight object 
 ...

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

Try to use bindActionCreators:

import {bindActionCreators} from'redux'

const mapDispatchToProps = dispatch => {
 return bindActionCreators({
 onHighlight: addHighlight,
 onDeleteHighlight: deleteHighlight ,
 onSelectHighlight: selectHighlight
 }, dispatch);
 }