Question

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

在我的项目中，我将NextJS用于前端，对于支持库，我将redux-toolkit用于整个应用程序的Redux管理，而next-redux-wrapper用于包装页面的状态混合。

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

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

过去，我一直使用isLoggedIn，但我选择不使用它，因为redux-persist阻止了UI渲染，直到从存储中获取持久数据为止，这与SSR。

当前，我通过使用PersistGate中的isLoggedIn方法解决了App.getInitialProps的加载问题，然后导致对加载的每一页都调用_app.ts的水化，但这带来了另一个问题：现在所有页面都在服务器端呈现，并且没有NextJS的静态页面优化。

是否有什么方法可以使NextJS保持静态页面优化，不使用next-redux-persist库，并且在刷新任何页面时仍然能够充实客户端存储？

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

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

Answer 1

今天遇到了同样的问题。问题是我们需要将客户端存储与页面渲染分离，并将其移动到安装组件的 useEffect 中。基本思想是，您首先完整地呈现页面，然后使用客户端存储信息更新页面。

直接合并客户端本地存储可能/会干扰水合作用。

这是我使用的代码示例

export default const MenuBar = () => {
  const isLoggedIn = useSelector((state) => state.isLoggedIn);
  useEffect(() => {
    // loads from clients local storage
    const auth = loadAuthenticationToken(); 
    if (auth !== null) {
      // updates the store with local storage data
      dispatch(actions.jwtTokenUpdate(auth)); 
    }
  }, [dispatch]);
  
  if (isLoggedIn) {
    return <p>you are logged in</p>;
  } else {
    return <p>please log in</p>;
  }
}

作为参考，NextJS 上的一个 github 问题：https://github.com/vercel/next.js/discussions/17443

以及需要窗口访问权限以进行渲染的博客文章：https://dev.to/adrien/creating-a-custom-react-hook-to-get-the-window-s-dimensions-in-next-js-135k

Answer 2

文档中提到如果在_app.js中使用getInitialProps，则会丢失静态优化。我不知道您为什么在服务器端使用redux，我个人建议您仅在客户端使用redux，并且您不再需要使用next-redux-wrapper，因为它在底层使用了getInitialProps。

带有redux-toolkit

的示例

Answer 3

另外请注意，next-redux-wrapper 在 app.js/ts 上使用 getInitialProps，当你用你的商店包装它时。所以当你使用这个库并用它包装你的应用程序时，你会自动失去静态优化。

如何正确刷新页面刷新NextJS中的Redux状态？

3 个答案: