Question

React-toolkit 无法读取未定义的属性（读取‘类型’）错误

2021-11-24

2121

javascript reactjs redux redux-toolkit

我正在学习 redux-toolkit，并且编写了示例代码，但是在使用 useDisptach 方法时，我收到“无法读取未定义的属性（读取‘类型’）”错误。您认为这是什么原因造成的？我在下面分享代码：

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

我的 device.js 文件：

    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;

我的 store.js 文件：

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

Answer 1

我发现我犯了一个错误。index.js文件中第5行的导入应该是这样的：import {detectDevice}from“../redux/device”;