js y @reduxjs/toolkit en mi proyecto. Cuando trato de obtener datos de la tienda con el método useSelector, se devuelve un valor indefinido.
aquí mi archivo reductor:
import { createSlice } from "@reduxjs/toolkit"; export const deviceSlice = createSlice({ name: "isMobile", initialState: { value: false, }, reducers: { detectDevice: (state) => { state.value = !state.value; }, }, }); export const { detectDevice } = deviceSlice.actions; export default deviceSlice.reducer;aquí mi archivo store.js:
import { configureStore } from "@reduxjs/toolkit"; import { detectDevice } from "./device"; export default configureStore({ reducer: { isMobile: detectDevice, }, });y mi archivo index.js:
import Head from "next/head"; import Nav from "../components/nav/Nav"; import { useEffect } from "react"; import { useSelector, useDispatch } from "react-redux"; import { detectDevice } from "../redux/device"; export default function Home() { const dispatchDetectDevice = useDispatch(); let size = useSelector((state) => state.isMobile.value); useEffect(() => { if (window.innerWidth < 576) dispatchDetectDevice(detectDevice(true)); else { dispatchDetectDevice(detectDevice(false)); } console.log(size); }); return ( <div> <Head> <title>Create Next App</title> <meta name="description" content="Generated by create next app" /> <link rel="icon" href="/favicon.ico" /> </Head> <Nav /> </div> ); }El método console.log() en la línea 15 devuelve un valor indefinido.
¿Cuál cree usted que es la razón de esto?
No se puede acceder a su estado global a menos que su aplicación haya sido empaquetada con el provider de la Redux store . Esto podría explicar por qué su size no está undefined .
No veo ningún problema en sus archivos store.js ni device.js .
¿Podría adjuntar su archivo _app.js ?
Esto debería estar en él:
import { Provider } from "react-redux"; import store from "PATH_TO_YOUR_STORE"; function MyApp({ Component, pageProps }) { return ( <Provider store={store}> <Component {...pageProps} /> </Provider> ) } export default MyApp;