javascript next. js @reduxjs/toolkit userable return undefined

t30tvxxf 于 4个月前发布在 Java

关注(0)|答案(2)|浏览(30)

js和@reduxjs/toolkit在我的项目中。当我尝试使用useReader方法从store中获取数据时，未定义的值返回。
这里是我的reducer文件：

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;

字符串
这里是我的store.js文件：

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

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

型
第15行的console.log（）方法返回undefined值。
你认为这是什么原因？

JavaScript

来源：https://stackoverflow.com/questions/70072027/next-js-reduxjs-toolkit-useselector-return-undefined

2条答案

按热度按时间

dxpyg8gm1#

除非你的应用程序已经用Redux store的provider Package ，否则你的全局状态是无法访问的。这可以解释为什么你的size是undefined。
我没有看到你的store.js或device.js文件有任何问题。
请附上你的_app.js文件好吗？
这应该在里面：

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;

字符串

赞(0）回复(0）举报 4个月前

emeijp432#

尝试在useSelector函数中使用return语句，如：

let size = useSelector((state) => return state.isMobile.value);

字符串
并检查你是否正确地为整个应用程序提供了store。希望这将修复你的错误，如果你需要任何帮助，请花时间阅读关于Nextjs的redux工具包使用的官方指南。

赞(0）回复(0）举报 4个月前

我来回答

javascript next. js @reduxjs/toolkit userable return undefined

2条答案

相关问题

热门标签

最新问答