如何在页面刷新时正确补充 NextJS 中的 Redux 状态？

Question

我遇到的问题是在应用程序重新加载/页面刷新时从本地存储中获取用户数据。

在我的项目中，我将 NextJS 用于前端，以及用于redux-toolkit跨应用程序的 redux 管理和next-redux-wrapper包装页面的状态水合的支持库。

用户可以登录，在这种情况下，我将isLoggedIn布尔值存储在本地存储和 redux 状态中。根据isLoggedIn布尔值，我更改了Navbar组件样式（Navbar直接包含在 中_app.tsx）。

当用户刷新任何页面时，isLoggedIn布尔值不会加载到状态中，而是存在于本地存储中。

过去我一直在使用，redux-persist但我选择不使用它，因为它PersistGate会阻止 UI 呈现，直到从存储中获取持久数据，这与 SSR 的想法相冲突。

目前，我isLoggedIn通过使用这种App.getInitialProps方法修复了加载问题，在该方法中_app.ts，next-redux-persist每个加载的页面都会被调用，但这会引入另一个问题：所有页面现在都在服务器端呈现，并且没有 NextJS 的静态页面优化。

有什么方法可以不丢失 NextJS 的静态页面优化，不使用redux-persist库并且在刷新任何页面时仍然能够对客户端存储进行补充？

当前代码结构（为简单起见省略了一些代码）：

file: _app.tsx

import { wrapper } from 'store';

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <>
      <Navbar />
      <Component {...pageProps} />
    </>
  );
};


MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext);

  return { ...appProps };
};

export default wrapper.withRedux(MyApp);

file: store.ts

import {
  combineReducers,
  configureStore,
  EnhancedStore,
  getDefaultMiddleware
} from '@reduxjs/toolkit';
import { createWrapper, MakeStore } from 'next-redux-wrapper';
import userReducer from 'lib/slices/userSlice';

const rootReducer = combineReducers({
  user: userReducer
});

const setupStore = (context): EnhancedStore => {
  const middleware = [...getDefaultMiddleware(), thunkMiddleware];

  if (process.env.NODE_ENV === 'development') {
    middleware.push(logger);
  }

  return configureStore({
    reducer: rootReducer,
    middleware,
    // preloadedState,
    devTools: process.env.NODE_ENV === 'development'
  });
};

const makeStore: MakeStore = (context) => setupStore(context);
export const wrapper = createWrapper(makeStore, {
  debug: process.env.NODE_ENV === 'development'
});

file: userSlice.ts

import { createSlice } from '@reduxjs/toolkit';
import { HYDRATE } from 'next-redux-wrapper';

const initialState = {
  isLoggedIn: false
}

export const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    login: (state) => {
      state.isLoggedIn = true;
      localStorage.setItem('loggedInData', { isLoggedIn: true });
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(HYDRATE, (state, action: any) => {
        if (typeof window !== 'undefined') {
          const storedLoggedInData = localStorage.getItem('loggedInData');
          if (storedLoggedInData != null && storedLoggedInData) {
            const parsedJson = JSON.parse(storedLoggedInData);
            state.isLoggedIn = parsedJson.isLoggedIn ?? false;
          } else {
            state.isLoggedIn = false
          }
        }
      });
  }
});

export const isLoggedInSelector = (state: RootState) => state.user.isLoggedIn;

export default userSlice.reducer;

file: Navbar.tsx

import { useSelector } from 'react-redux';
import { isLoggedInSelector } from 'lib/slices/userSlice';

export default function Navbar() {
   const isLoggedIn = useSelector(isLoggedInSelector);
   return (
    <div className={`${ isLoggedIn ? 'logged-in-style' : 'logged-out-style'}`}>...</div>
   )
}

Answer 1

文档中提到，如果您在 _app.js 中使用 getInitialProps，您将失去静态优化。我不知道你为什么在服务器端使用 redux，我个人建议你只在客户端使用它，并且你不再需要使用 next-redux-wrapper 因为它在后台使用 getInitialProps。

使用redux-toolkit的示例