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,
},
});
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";