React-toolkit Cannot read properties of undefined (reading ‘type’) error

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

JavaScript
​x
 
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;

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

JavaScript
 
    import { configureStore } from "@reduxjs/toolkit";
import detectDevice from "./device";
export default configureStore({
  reducer: {
    isMobile: detectDevice,
  },
});
​

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”;

Advertisement

Answer