react-simple-maps icon indicating copy to clipboard operation
react-simple-maps copied to clipboard

Can't integrate redux-tooltip with simple maps

Open raph90 opened this issue 6 years ago • 0 comments

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?

raph90 avatar Aug 09 '19 10:08 raph90