ReferenceError：窗口未在 redux 组件中定义

Question

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  value: window.innerWidth
};

const screenSizeSlice = createSlice({
  name: 'screenSize',
  initialState,
  reducers: {    
    screenSizeResize: (state, actions) => {
      state.value = actions.payload
    },
  }
})

export const {screenSizeResize } = screenSizeSlice.actions

export default screenSizeSlice.reducer   

所以我有这个组件，但我有这个错误：

ReferenceError：窗口未定义

如果我用

typeof window !== 'undefined'

来解决的话，就会造成水合作用。我正在使用

nextjs

顺便说一句。

如何解决这个问题？

我尝试了条件渲染，但它导致了水合作用。

Answer 1

当应用程序启动时，我们还没有窗口对象。因为它只有在组件安装后才可用。所以，我想说你必须将该代码移至 useEffect() 中，或者如果你使用基于类的组件，则移至 componentDidMount()

对于功能组件。

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  value: ""
};

const screenSizeSlice = createSlice({
  name: 'screenSize',
  initialState,
  reducers: {    
    screenSizeResize: (state, actions) => {
      state.value = actions.payload
    },
  }
})

export const {screenSizeResize } = screenSizeSlice.actions

export default screenSizeSlice.reducer 

首先给它一个空值，当应用程序在 App.js 中安装该值时，在 useEffect 内设置此值。

const { screenSizeResize } = useSelector(screenSizeSlice)

useEffect(() => {
   screenSizeResize(size)
})

我想这会起作用，如果有效请告诉我。