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}
      onm ouseDown={() => {}}
      onm ouseMove={() => {}}
      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?

CodePudding user response：

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}
      onm ouseDown={() => {}}
      onm ouseMove={() => {}}
      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