I’m learning redux-toolkit and I wrote sample code, but when using useDisptach method I get “Cannot read properties of undefined (reading ‘type’)” error. What do you think is the reason for this? I am sharing the code below:
my index.js file:
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 dispatch = useDispatch(); useEffect(() => { dispatch(detectDevice()); }, []); return ( <div> <Head> <title>Test</title> <meta name="description" content="Generated by create next app" /> <link rel="icon" href="/favicon.ico" /> </Head> <Nav /> </div> ); }
my device.js file:
import { createSlice } from "@reduxjs/toolkit"; export const deviceSlice = createSlice({ name: "isMobile", initialState: { value: false, }, reducers: { detectDevice: (state) => { state.value = true; }, }, }); export const { detectDevice } = deviceSlice.actions; export default deviceSlice.reducer;
my store.js file :
import { configureStore } from "@reduxjs/toolkit"; import detectDevice from "./device"; export default configureStore({ reducer: { isMobile: detectDevice, }, });
Advertisement
Answer
I found where I made a mistake. The import on line 5 in the index.js file should have been like this: import { detectDevice } from “../redux/device”;