zcreativelabs / react-simple-maps

Beautiful React SVG maps with d3-geo and topojson using a declarative api.
https://www.react-simple-maps.io/
MIT License
3.12k stars 426 forks source link

Can't integrate redux-tooltip with simple maps #148

Open raph90 opened 5 years ago

raph90 commented 5 years ago

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?