next.js @reduxjs/toolkit useSelector 返回 undefined答案

【问题标题】：next.js @reduxjs/toolkit useSelector return undefinednext.js @reduxjs/toolkit useSelector 返回 undefined
【发布时间】：2022-01-01 10:09:06
【问题描述】：

js 和 @reduxjs/toolkit 在我的项目中。当我尝试使用 useSelector 方法从存储中获取数据时，返回未定义的值。

这里是我的减速器文件：

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() 方法返回未定义的值。

你认为这是什么原因？

【问题讨论】：

Home 是否被 Redux 存储提供者包装？

标签： javascript reactjs redux react-redux next.js

【解决方案1】：

除非您的应用程序已使用Redux store 的provider 包装，否则无法访问您的全局状态。这可以解释为什么你的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;

【讨论】：