react-simple-maps
react-simple-maps copied to clipboard
Can't integrate redux-tooltip with simple maps
I'm trying to integrate redux-tooltip with my map but am running into issues, - I think it's to do with how the reducer is set up. Here's my map component:
import { useSelector, useDispatch } from "react-redux";
import { Tooltip, actions } from "redux-tooltip";
const dispatch = useDispatch();
const { show, hide } = actions
const handleMove = (geography, evt) => {
const x = evt.clientX
const y = evt.clientY + window.pageYOffset
dispatch(
show({
origin: { x, y },
content: "hello
})
)
}
const handleLeave = () => {
dispatch(hide())
}
... return (
<div className={classes.outerDiv}>
<ComposableMap ref={container}>
<ZoomableGroup disablePanning={true}>
<Geographies geography={json} disableOptimization={false}>
{(geographies, projection) =>
geographies.map((geography, i) => {
if (dict[geography.properties["Alpha-2"]] === undefined) {
dict[geography.properties["Alpha-2"]] = 0;
}
return (
<Geography
key={i}
geography={geography}
projection={projection}
onMouseMove={handleMove}
onMouseLeave={handleLeave}
style={{
default: {
fill: exposureScale(
dict[geography.properties["Alpha-2"]]
),
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"
}
}}
/>
);
})
}
</Geographies>
</ZoomableGroup>
</ComposableMap>
<Tooltip/>
</div>
)
Then you have my rootReducer:
import { reducer as tooltip } from "redux-tooltip"
const rootReducer = combineReducers({
...other reducers here,
tooltip
})
Then my store:
import rootReducer from './redux/reducers'
import thunk from "redux-thunk";
const store = createStore(rootReducer, compose(
applyMiddleware(thunk),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
));
The error I'm getting says 'Uncaught TypeError: Cannot read property 'bool' of undefined', and it's because one of the prop types, show, in the Tooltip component is failing. I would assume this is passed by the show and hide actions, but that's clearly not working. Can you help me see where I'm going wrong?