React-Router地址栏切换路由页面刷新，Redux状态丢失求助

这个问题我之前帮很多开发者解决过——Redux状态默认只存在内存中，浏览器刷新时会重新加载整个应用，内存里的状态自然就被清空了，所以咱们得把需要保留的状态持久化到本地存储里才行。下面给你两种常用的解决方案，按需选择：

方案一：手动利用localStorage/sessionStorage持久化 #

这种方式适合简单应用，不用额外依赖第三方库，自己完全控制逻辑：

1. 封装状态加载和保存函数 #

// 从localStorage加载之前保存的状态
const loadState = () => {
  try {
    const serializedState = localStorage.getItem('reduxState');
    // 没有保存过状态就返回undefined，让reducer使用默认初始值
    return serializedState ? JSON.parse(serializedState) : undefined;
  } catch (error) {
    // 读取失败时返回undefined，避免应用崩溃
    return undefined;
  }
};

// 将当前状态保存到localStorage
const saveState = (state) => {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem('reduxState', serializedState);
  } catch (error) {
    // 忽略写操作错误，比如存储容量不足的情况
  }
};

2. 关联Store与本地存储 #

创建Store时传入加载的初始状态，同时订阅Store的变化，每次状态更新都同步保存到本地：

import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk'; // 如果你用到了异步中间件
import authReducer from './reducers/authReducer';

const rootReducer = combineReducers({
  auth: authReducer,
  // 其他业务reducer...
});

const store = createStore(
  rootReducer,
  loadState(), // 传入加载的初始状态
  applyMiddleware(thunk)
);

// 订阅Store变化，建议只保存必要的状态（比如auth模块），减少存储体积
store.subscribe(() => {
  saveState({
    auth: store.getState().auth
  });
});

export default store;

方案二：使用redux-persist库（推荐复杂应用） #

如果你的应用状态结构复杂，或者需要更灵活的持久化规则（比如指定哪些reducer需要持久化、自定义存储方式），redux-persist是更成熟的选择：

1. 安装依赖 #

npm install redux-persist
# 或者用yarn
yarn add redux-persist

2. 配置Persist Reducer和Store #

修改Store配置文件，用persistReducer包裹根reducer并创建persistStore：

import { createStore, combineReducers } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 默认使用localStorage，可替换为sessionStorage

// 持久化配置
const persistConfig = {
  key: 'root', // 存储的根键名
  storage, // 指定存储方式
  whitelist: ['auth'] // 只持久化auth模块的状态，其他模块跳过
  // 也可以用blacklist排除不需要持久化的模块：blacklist: ['tempDataReducer']
};

const rootReducer = combineReducers({
  auth: authReducer,
  // 其他业务reducer...
});

// 用persistReducer增强根reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);

// 创建Store和persistor实例
export const store = createStore(persistedReducer);
export const persistor = persistStore(store);

3. 在根组件中使用PersistGate #

修改根组件，用PersistGate包裹应用，确保持久化状态加载完成后再渲染页面：

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    {/* loading可以设置加载时的占位组件，比如null或自定义加载动画 */}
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);

重要注意事项 #

• 敏感数据处理：localStorage是明文存储的，容易受到XSS攻击，绝对不要存储密码、明文token等敏感信息。重要的认证信息建议使用HttpOnly Cookie来存储。
• 序列化限制：JSON.stringify无法序列化Date对象、函数等类型，如果状态里有这类数据，需要在reducer中转换为可序列化格式，或者使用redux-persist的transformers进行处理。
• 存储选择：如果希望浏览器关闭后状态自动清除，可以把redux-persist的storage换成redux-persist/lib/storage/session（对应sessionStorage）。

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