“this.props.dispatch is not a function” when using redux-tooltip

Question

The below this.props.dispatch issue was fixed but now I am receiving an error message saying:

 Could not find "store" in either the context or props of "Connect(Tooltip)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Tooltip)". ▶ 25 stack frames were collapsed. ./src/index.js C:/Users/rksny/Desktop/travelPlanner/src/index.js:11 8 | import registerServiceWorker from './registerServiceWorker'; 9 | 10 | > 11 | ReactDOM.render(<App />, document.getElementById('root')); 12 | registerServiceWorker(); 13 | 14 | 

I keep receiving "this.props.dispatch" is not a function while using redux-tooltip. This is my first time trying to utilizing redux so maybe I am missing something obvious. I'm essentially trying to copy the react simple maps example found here: https://www.react-simple-maps.io/with-redux-tooltip .

The error message is:

 TypeError: this.props.dispatch is not a function 20 | handleMove(geography, evt) { 21 | const x = evt.clientX 22 | const y = evt.clientY + window.pageYOffset > 23 | this.props.dispatch( 24 | show({ 25 | origin: { x, y }, 26 | content: geography.properties.name, 

Code snippet:

 import React, { Component } from 'react'; import withRedux from "next-redux-wrapper" import { ComposableMap, ZoomableGroup, Geographies, Geography } from "react-simple-maps"; import { WorldMapData } from '../Utils/Data'; import { connect } from 'react-redux'; import { Tooltip, actions, } from "redux-tooltip" import { initStore } from './stores'; const { show, hide } = actions class WorldMap extends Component { constructor() { super() this.handleMove = this.handleMove.bind(this) this.handleLeave = this.handleLeave.bind(this) } handleMove(geography, evt) { const x = evt.clientX const y = evt.clientY + window.pageYOffset this.props.dispatch( show({ origin: { x, y }, content: geography.properties.name, }) ) } handleLeave() { this.props.dispatch(hide()) } render() { return ( <div > <div className='' style={{height: '18vh'}}> <p className="black b f1 f-headline-ns tc db mb3 mb4-ns" title="Home">Travel Planner</p> <p className='black f2'>select dream destination below</p> </div> <div> <ComposableMap className='ba' style={{width: '90%', height: 'auto', maxHeight: '70vh'}}> <ZoomableGroup> <Geographies geography={ WorldMapData }> {(geographies, projection) => geographies.map(geography => ( <Geography key={ geography.id } geography={ geography } projection={ projection } onMouseMove={this.handleMove} onMouseLeave={this.handleLeave} style={{ default: { fill: "#ECEFF1", stroke: "#607D8B", strokeWidth: 0.75, outline: "none", }, hover: { fill: "#607D8B", stroke: "#607D8B", strokeWidth: 0.75, outline: "none", }, pressed: { fill: "#FF5722", stroke: "#607D8B", strokeWidth: 0.75, outline: "none", }, }} onClick = {this.props.onRouteChange} /> ))} </Geographies> </ZoomableGroup> </ComposableMap> <Tooltip /> </div> </div> ) } } export default withRedux(initStore)(WorldMap); 

If helpful here is a link to the gh-pages where the app is posted: https://rksnyder7.github.io/travelPlanner/

Answer 1

Initialize your component and base class with props. Initially you should bind it and make calls in constructor.

 constructor(props) {
   super(props)
   this.handleMove = this.handleMove.bind(this)
   this.handleLeave = this.handleLeave.bind(this)
 }

Answer 2

If I understand this correctly, then it seems you're trying to access dispatch() directly, rather than via the store (that withRedux injects into your component). Consider the following updates to your code:

handleMove(geography, evt) {

  const x = evt.clientX
  const y = evt.clientY + window.pageYOffset

  this.props.store.dispatch( // [UPDATE] Add store
    show({
      origin: { x, y },
      content: geography.properties.name,
    })
  )
}

handleLeave() {

  this.props.store.dispatch(hide()) // [UPDATE] Add store
}