添加redux-persist后React应用显示空白屏问题求助

问题描述 #

开发基于MERN栈的社交媒体网站，使用redux-persist实现状态本地持久化。同时启用redux-persist和MUI ThemeProvider时，页面显示空白（root div为空）；单独移除其中一个功能，应用可正常运行。需要定位问题并修复，确保redux-persist正常工作且无空白屏。

相关代码片段 #

redux-persist配置文件 #

import { configureStore } from "@reduxjs/toolkit";
import {
  persistStore,
  persistReducer,
  FLUSH,
  PERSIST,
  REGISTER,
  PAUSE,
  PURGE,
  REHYDRATE,
} from "redux-persist";
import storage from "redux-persist/lib/storage";
import authReducer from "./state";

const persistConfig = {
  key: "root",
  storage,
};

export const persistedReducer = persistReducer(persistConfig, authReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) => {
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE],
      },
    })
  },
});

export const persistor = persistStore(store);

src/index.js #

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import {store, persistor} from "./persistor";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>
);

App.js #

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { useMemo } from "react";
import { useSelector } from "react-redux";
import { createTheme } from "@mui/material/styles";
import { ThemeProvider, CssBaseline } from "@mui/material";

// import Sample from "./Sample";
import HomePage from "./scenes/HomePage/HomePage";
import LoginPage from "./scenes/LoginPage/LoginPage";
import ProfilePage from "./scenes/ProfilePage/ProfilePage";
import { themeSettings } from "./theme";

function App() {
  const mode = useSelector((state) => state.mode);
  const theme = useMemo(() => {
    createTheme(themeSettings(mode));
  }, [mode]);

  return (
    <>
      <BrowserRouter>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/login" element={<LoginPage />} />
            <Route path="/profile/:username" element={<ProfilePage />} />
          </Routes>
        </ThemeProvider>
      </BrowserRouter>
    </>
  );
}

export default App;

问题定位与修复 #

1. Redux中间件未返回 #

在redux-persist配置文件的configureStore中，middleware回调函数调用了getDefaultMiddleware但未返回结果，导致中间件数组为空，Redux无法处理persist相关动作，引发页面渲染异常。

修复代码：

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE],
      },
    }),
});

2. useMemo未返回主题实例 #

App.js中useMemo的回调函数创建了主题但未返回，导致theme变量为undefined，MUI的ThemeProvider无法正常渲染内容。

修复代码：

const theme = useMemo(() => {
  return createTheme(themeSettings(mode));
}, [mode]);

修复以上两个问题后，redux-persist可正常持久化状态，同时MUI主题也能正常渲染，页面空白问题即可解决。

内容的提问来源于stack exchange，提问作者pppratspota