Estoy creando mi primera aplicación React y acabo de agregarle redux porque comenzó a volverse demasiado complejo para pasar estados a mis diferentes componentes.

He estado siguiendo la documentación oficial de redux, así como los tutoriales en línea y, aunque todo parece funcionar bien, la aplicación falla cada vez que recargo la página y recibo el siguiente mensaje de error "Error: no se pudo encontrar el valor de contexto de react-redux; asegúrese de el componente está envuelto en un <Proveedor>".

Así es como se ve mi index.js:

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

Aquí está mi 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, } })

Y mis dos reductores de rebanadas:

 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;

y

 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;

Leí docenas de publicaciones, probé varias de las soluciones dadas, eliminé mi aplicación y la reinicié varias veces, pero el problema persiste.

El código en sí mismo parece funcionar bien, puedo acceder y actualizar los estados como quiero y se mantienen consistentes a través de las diferentes páginas. Pero si actualizo alguna de las páginas donde uso useSelector, la aplicación falla. Redux devtools no muestra ningún error hasta que actualizo y luego dice "No se encontró ninguna tienda. Asegúrate de seguir las instrucciones".

¿Me estoy perdiendo de algo?

¡Gracias por adelantado!

EDITAR: me tomó un tiempo pero lo hice funcionar. Con suerte, esto podría ayudar a alguien algún día, así que así es como resolví mi problema: siguiendo los tutoriales, mi proveedor redux estaba envuelto alrededor de mi componente de aplicación en mi archivo index.js. Lo moví al componente de la aplicación real. ¡Problema resuelto!