Reactjs 未捕获错误：找不到react redux上下文值；请确保组件包装在<；供应商>；

我想将redux与我的react项目集成，但遇到了未捕获的错误：找不到react redux上下文值；请确保在使用useSelector时将组件包装在useSelector中。我想我做的每件事都是对的，但我总是犯错误，所以我需要你的帮助。这是代码index.tsx

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { createStore } from "redux";
import { Provider } from "react-redux";
import rootReducer from "./store/rootReducer";
import { composeWithDevTools } from "redux-devtools-extension";

const store = createStore(rootReducer, composeWithDevTools());

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

portal.component.tsx

import * as THREE from "three";
import React, { useState } from "react";
import { useLoader } from "react-three-fiber";
import Dome from "../Dome/dome.component";
import { useSelector } from "react-redux";

function Portals() {
  const [which, set] = useState(0);
  const store = useSelector((state) => state.portal.portals);
  const { link, ...props } = store[which];
  const maps = useLoader(
    THREE.TextureLoader,
    store.map((entry) => entry.url)
  );
  return <Dome onClick={() => set(link)} {...props} texture={maps[which]} />;
}

export default Portals;

import * as THREE from "three";
import React, { useState } from "react";
import { useLoader } from "react-three-fiber";
import Dome from "../Dome/dome.component";
import { useSelector } from "react-redux";

function Portals() {
  const [which, set] = useState(0);
  const store = useSelector((state) => state.portal.portals);
  const { link, ...props } = store[which];
  const maps = useLoader(
    THREE.TextureLoader,
    store.map((entry) => entry.url)
  );
  return <Dome onClick={() => set(link)} {...props} texture={maps[which]} />;
}

export default Portals;

import picture1 from "../assets/picture1.jpg";
import picture3 from "../assets/picture3.jpg";
import picture5 from "../assets/picture5.jpg";

//Action types

//Action creators

//reducer
const initialState = {
  portals: [
    {
      name: "outside",
      color: "lightpink",
      position: [-400, 0, 300],
      url: picture1,
      hotSpotTitle: "Hall",
      hotSpotImage: picture5,
      link: 1,
    },

    {
      name: "inside",
      color: "lightblue",
      position: [-10, 0, 300],
      url: picture5,
      hotSpotTitle: "Yard",
      hotSpotImage: picture3,
      link: 2,
    },
    {
      name: "Hall",
      color: "red",
      position: [200, 0, 100],
      url: picture3,
      hotSpotTitle: "Hall",
      hotSpotImage: picture5,
      link: 1,
    },
  ],
};

const portalReducer = (state = initialState, action) => {
  return state;
};

export default portalReducer;