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

[Mirzhal95]

I wanted to integrate redux with my react project but faced Uncaught Error: could not find react-redux context value; please ensure the component is wrapped in a when used useSelector. I assume I have done everything right but I keep getting that error thus I need your help. Here is the code 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")
);


rootReducer.ts

import { combineReducers } from "redux";
import portalReducer from "./portal";

const rootReducer = combineReducers({
  portal: portalReducer,
});

export default rootReducer;
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;
portalReducer

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;

[Mirzhal95]

@markerikson Pls can you help((. I have already visited this issue #1489. But the issue persists))

[timdorr]

The issue tracker here on GitHub is reserved for bug reports and feature requests. For usage questions (which is what I believe this is), please use Stack Overflow or Reactiflux where there are a lot more people ready to help you out. Thanks!

Please feel free to reply if you think this issue was closed prematurely.