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

Question

我将我的整个应用程序封装在一个 react-redux Provider 中并给它一个 store 参数，到目前为止，我能够从我的应用程序的各个点成功地使用它。现在，我突然创建了一个如下所示的层次结构：Canva > RenderPolygons 其中两个组件都通过 connect() 函数连接到商店。

在 Canva 级别 redux 完美运行，但是当我尝试添加 RenderPolygons 或连接到 redux 存储的任何其他组件时，我收到 Uncaught Error: Could not find "store" in the context of "Connect(RenderPolygons)" 错误。

代码如下所示：

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);

渲染多边形：

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);

顺便说一句，我可以从 RenderPolygons 组件的主体中删除所有代码，它仍然会抛出此错误。我已经使用 Redux 很长时间了，我感到非常困惑。怎么回事？

Answer 1

当使用不同的 React 渲染器（例如 Konva）时，您需要将组件包装在新提供程序中的不同渲染器中。对于 Konva，Stage 的 children。

见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：另外，请注意 connect 是遗留的 api，您应该继续使用 useSelector 和 useDispatch。您可以在 official Redux Tutorial 中阅读现代 React（它也不使用 switch..case reducer、ACTION_TYPES、不可变的 reducer 逻辑或 createStore，因此只有 1/4 的代码）

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

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

reactjs

redux

react-redux