Uncaught Error: Could not find "store" in the context of "Connect(RenderPolygons)" in React Redux?

I encapsulated my whole app inside a react-redux Provider and given it a store parameter, and up to this point I was able to use it successfully from various points of my app. Now, suddently I created a hierarchy that looks like this: Canva > RenderPolygons where both the two components are connected to the store via connect() function.

On Canva level redux works perfectly but when I try to add the RenderPolygons or any other component connected to the redux store I get the Uncaught Error: Could not find "store" in the context of "Connect(RenderPolygons)" error.

The codes look like this:

Canva:

import React, { Dispatch, useEffect } from "react";
import { Stage, Layer, Circle } from "react-konva";
import { v4 as uuidv4 } from "uuid";
import { connect } from "react-redux";

import Grid from "./Shapes/Grid";
import { Polygon as Polygon_T } from "./Types/Shapes/Polygon";
import { addPolygon } from "../UseCases/inputPolygon/addPolygon";
import RenderPolygons from "../UseCases/inputPolygon/RenderPolygons";

import Provider from 'react-redux';
import { store } from '../Redux/Store/store';

interface CanvaProps {
  width?: number;
  height?: number;
}

const mapDispatchToProps = (dispatch: Dispatch<any>) => {
  return {
    addPolygon: (polygon: Polygon_T) => dispatch(addPolygon(polygon)),
  };
};

const Canva: React.FC<{
  addPolygon: (polygon: Polygon_T) => void;
  width?: number;
  height?: number;
}> = ({ addPolygon, width, height }) => {

  return (
    <Stage
      style={{
        backgroundColor: "#F9F9F9",
        width: width ? width + "px" : "0px",
        height: height ? height * 0.75 + "px" : "0px",
        boxShadow: "#E5E2E2 0px 6px 6px -3px",
      }}
      width={width}
      height={height}
      onMouseDown={() => {}}
      onMouseMove={() => {}}
      onClick={() => {}}
    >
      <Grid
        width={width}
        height={height ? height * 0.75 : window.innerHeight}
      />
      <RenderPolygons />
    </Stage>
  );
};

export default connect(null, mapDispatchToProps)(Canva);

RenderPolygon:

import React from "react";
import { Layer } from "react-konva";
import { connect } from "react-redux";

import Polygon from "../../GUIElements/Shapes/Polygon";
import { Polygon as Polygon_T } from "../../GUIElements/Types/Shapes/Polygon";
import { State } from "../../GUIElements/Types/Redux/State";

const mapStateToProps = (state: State) => {
  return {
    polygons: state.polygons,
  };
};

const RenderPolygons: React.FC<{ polygons: Polygon_T[] }> = ({ polygons }) => {
  return (
    <Layer>
      {polygons.map((polygon: Polygon_T) => (
        <Polygon points={polygon.vertices} name={polygon.id} />
      ))}
    </Layer>
  );
};

export default connect(mapStateToProps)(RenderPolygons);

By the way I can remove all the code from the RenderPolygons component’s body and it’d still throw this error. I’ve been using Redux for long time and I’m extremely baffled. What’s going on?

>Solution :

When using a different React renderer such as Konva, you need to wrap the components within the different Renderer within a new provider. In the case of Konva, the children of Stage.

See this issue.

const Canva: React.FC<{
  addPolygon: (polygon: Polygon_T) => void;
  width?: number;
  height?: number;
}> = ({ addPolygon, width, height }) => {

  const store = useStore()

  return (
    <Stage
      style={{
        backgroundColor: "#F9F9F9",
        width: width ? width + "px" : "0px",
        height: height ? height * 0.75 + "px" : "0px",
        boxShadow: "#E5E2E2 0px 6px 6px -3px",
      }}
      width={width}
      height={height}
      onMouseDown={() => {}}
      onMouseMove={() => {}}
      onClick={() => {}}
    >
     <Provider store={store}>
      <Grid
        width={width}
        height={height ? height * 0.75 : window.innerHeight}
      />
      <RenderPolygons />
     </Provider>
    </Stage>
  );
};

PS: also, please be aware that connect is a legacy api and you should be using useSelector and useDispatch going forward. You can read up on modern React (which also does not use switch..case reducers, ACTION_TYPES, immutable reducer logic or createStore and is only 1/4 of the code as a result) in the official Redux Tutorial