When I click on a pointer on my Google Maps component, I can see my store being updated in Redux Devtools but mapStateToProps does not seem to update my component props. Therefore, my Google Maps pointers <InfoWindow> does not open.
If I navigate to another Link(using react-router) from my NavBar and then navigate back to this page, the component receives the updated props from mapStateToProps and the previously clicked Google Maps pointer has the <InfoWindow> open.
I have been trying to debug this for the past 1 week, tried converting components/ClassSchedule/Map/Pure.jsx to a class component but it did not work.
components/ClassSchedule/Map/index.js
import { connect } from 'react-redux';
import { selectClass } from '../../../actions/index';
import Pure from './Pure';
const mapStateToProps = state => ({
selectedClass: state.classMapTable.selectedClass,
});
const mapDispatchToProps = dispatch => ({
selectClass: id => dispatch(selectClass(id)),
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(Pure);
components/ClassSchedule/Map/Pure.jsx
import React from 'react';
import MapContent from './MapContent';
const Map = props => {
return (
<MapContent
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=googleMapsKeyHere`}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `550px` }} />}
mapElement={<div style={{ height: `100%` }} />}
{...props}
/>
);
};
export default Map;
components/ClassSchedule/Map/MapContent.jsx
import React from 'react';
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
InfoWindow,
} from 'react-google-maps';
import { defaultPosition } from '../../../data/mapData';
import { classes } from '../../../data/classData';
const { zoom, centre } = defaultPosition;
const MapContent = withScriptjs(
withGoogleMap(({ selectedClass, selectClass }) => (
<GoogleMap defaultZoom={zoom} defaultCenter={centre}>
{classes.map(c => (
<Marker
key={`map${c.id}`}
icon={
'https://mt.google.com/vt/icon?psize=30&font=fonts/arialuni_t.ttf&color=ff304C13&name=icons/spotlight/spotlight-waypoint-a.png&ax=43&ay=48&text=%E2%80%A2'
}
position={c.coordinates}
onClick={() => selectClass(c.id)}
>
{selectedClass === c.id && (
<InfoWindow>
<React.Fragment>
<div>{c.area}</div>
<div>{`${c.level} ${c.subject}`}</div>
<div>{`${c.day}, ${c.time}`}</div>
</React.Fragment>
</InfoWindow>
)}
</Marker>
))}
</GoogleMap>
))
);
export default MapContent;
reducers/index.js
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
import classMapTable from './classMapTable';
export default history =>
combineReducers({
router: connectRouter(history),
classMapTable,
});
reducers/classMapTable.js
const classMapTable = (state = {}, action) => {
switch (action.type) {
case 'SELECT_CLASS':
return { ...state, selectedClass: action.classId };
default:
return state;
}
};
export default classMapTable;
store/index.js
import { createBrowserHistory } from 'history';
import { createStore, applyMiddleware } from 'redux';
import { routerMiddleware } from 'connected-react-router';
import { composeWithDevTools } from 'redux-devtools-extension';
import createRootReducer from '../reducers';
export const history = createBrowserHistory();
export default function configureStore(preloadedState) {
const store = createStore(
createRootReducer(history),
preloadedState,
composeWithDevTools(applyMiddleware(routerMiddleware(history)))
);
return store;
}
actions/index.js
export const selectClass = classId => ({
type: 'SELECT_CLASS',
classId,
});
