I am building my first React app and just added redux on it as it started getting too complex to pass states to my different components.

I have been following the official redux documentation as well as online tutorials and although everything seems to work fine, the app crashes whenever I reload the page and I receive the following error message "Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>".

Here is what my index.js looks like:

import React from 'react'
import ReactDOM from 'react-dom'
import './app.css'
import App from './App'
import { store } from './app/store'
import { Provider } from 'react-redux'

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

Here is my store.js:

import { configureStore } from '@reduxjs/toolkit';

import userReducer from "features/user";
import userInterfaceReducer from 'features/userInterface';

export const store = configureStore({
    reducer: {
      user: userReducer,
      userInterface: userInterfaceReducer,
    }
  })

And my two slice reducers:

import { createSlice } from "@reduxjs/toolkit";

export const userSlice = createSlice({
    name: "user",
    initialState: { value: {userType: "", fName: "", lName: ""}},
    reducers: {
        user: (state, action) => {
            state.value = action.payload;
        }
    }
})

export default userSlice.reducer;

and

import { createSlice } from "@reduxjs/toolkit";

export const userInterfaceSlice = createSlice({
    name: "open",
    initialState: { value: false}, // this state toggles a drawer present on several pages
    reducers: {
        toggleOpen: (state, action) => {
            state.value = action.payload;
        },
    }
})

export const { toggleOpen } = userInterfaceSlice.actions;

export default userInterfaceSlice.reducer;

I read through dozens of posts, tried several of the solutions given, killed my app and restarted it several times but the problem persists.

The code in itself seems to work fine, I can access and update the states as I want to and they stay consistent through the different pages. But if I refresh any of the pages where I use useSelector, the app crashes. The redux devtools doesn't show any error until I refresh and then says "No store found. Make sure to follow the instructions."

Am I missing something?

Thanks in advance!

EDIT: it took me a while but I got it to work. Hopefully, this might help someone one day, so here is how I solved my issue: Following tutorials, my redux Provider was wrapped around my App component in my index.js file. I moved it to the actual App component. Problem solved!