!! ERROR IMAGE HERE !!

Hi,

I’m having an issue with Redux and I need your help. I’m getting the following error:

Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

Here are the steps I followed:

Created the Redux store using createStore.
Wrapped my application with Provider.
Tried to use the Redux state inside a component.
Here is the code I’m using:

Store creation code:

// store.ts
import { createStore, combineReducers } from 'redux';
import drawingModeReducer from './DrawingModeReducer';

const rootReducer = combineReducers({
  drawingMode: drawingModeReducer,
  // add other reducers if any
});

const store = createStore(rootReducer);

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export default store;

Wrapping the application with Provider:

// _app.tsx
import { AppProps } from 'next/app';
import { Provider } from 'react-redux';
import store from './path/to/store'; // adjust the path as needed

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

Component where I’m trying to use Redux state:

// Map.tsx
import React from 'react';
import { Box } from '@chakra-ui/react';
import { LatLngTuple } from 'leaflet';
import { MapContainer, Marker, Polyline, TileLayer, ZoomControl, useMapEvents } from 'react-leaflet';
import { useSelector, useDispatch } from 'react-redux';
import { RootState, AppDispatch } from './path/to/store'; // adjust the path as needed
import { setDrawingMode } from './path/to/DrawingModeReducer'; // adjust the path as needed

interface MapProps {
  fullscreen: boolean;
  onClick: () => void;
}

const Map: React.FC<MapProps> = ({ fullscreen, onClick }) => {
  const turkeyPosition: LatLngTuple = [39.9334, 32.8597];
  const drawingMode = useSelector((state: RootState) => state.drawingMode.drawingMode);
  const dispatch = useDispatch<AppDispatch>();
  const [markerPosition, setMarkerPosition] = React.useState<LatLngTuple | null>(null);
  const [polylinePositions, setPolylinePositions] = React.useState<LatLngTuple[]>([]);

  function MapEventsHandler() {
    const map = useMapEvents({
      click: (event) => {
        const { latlng } = event;
        if (drawingMode) {
          setMarkerPosition([latlng.lat, latlng.lng]);
          setPolylinePositions([...polylinePositions, [latlng.lat, latlng.lng]]);
        }
      },
    });
    return null;
  }

  const toggleDrawingMode = () => {
    dispatch(setDrawingMode(!drawingMode));
  };

  return (
    <Box height={fullscreen ? '100vh' : '100%'}>
      <MapContainer
        center={turkeyPosition}
        zoom={6}
        style={{ height: '100%', width: '100%' }}
        zoomControl={false}
      >
        <MapEventsHandler />
        <TileLayer url="https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}{r}.png" />
        <ZoomControl position="topright" />

        {polylinePositions.length > 1 && drawingMode && (
          <Polyline positions={polylinePositions} color="blue" />
        )}

        {markerPosition && drawingMode && <Marker position={markerPosition}></Marker>}
      </MapContainer>
      <button onClick={toggleDrawingMode}>
        Toggle Drawing Mode
      </button>
    </Box>
  );
};

export default Map;

Could you please review the code and help me figure out what might be going wrong? Any advice would be greatly appreciated.

Thanks!

I tried to integrate Redux into my React application using createStore. I expected the Redux state to be available in my components. I wrapped the app with and created the store correctly. However, when accessing the Redux state in a component.