Lit项目中Vaadin Router跳转新路由时Redux状态重置问题

• 点击Vaadin Router的<a>链接属于客户端路由跳转：Vaadin Router会自动拦截这类链接的点击事件，阻止浏览器默认的整页刷新行为，直接在当前页面内渲染目标视图。由于Redux store存在内存中，页面未重新加载，状态会完整保留。
• 修改地址栏或使用document.location.href跳转属于整页刷新跳转：这会触发浏览器重新加载整个应用，所有内存中的数据（包括Redux store）都会被清空，相当于重新初始化应用，导致之前的状态丢失。

1. 统一使用客户端路由跳转 #

所有页面跳转都采用Vaadin Router提供的方式，避免触发整页刷新：

• 代码内跳转时，调用router.go('/charger')代替document.location.href = '/charger'；
• 页面中的链接保持<a href="/charger">格式即可，Vaadin Router默认会拦截这类点击，自动转为客户端跳转，无需额外配置。

2. 实现Redux状态持久化 #

如果需要支持地址栏直接输入、外部链接跳转这类会触发整页刷新的场景，需将Redux状态持久化到本地存储，页面初始化时从存储中恢复状态。

手动实现持久化（无需第三方库） #

// 从localStorage加载之前保存的状态
const loadSavedState = () => {
  try {
    const storedState = localStorage.getItem('appReduxState');
    return storedState ? JSON.parse(storedState) : undefined;
  } catch (err) {
    console.warn('加载持久化状态失败:', err);
    return undefined;
  }
};

// 将当前状态保存到localStorage
const saveCurrentState = (state) => {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem('appReduxState', serializedState);
  } catch (err) {
    console.warn('保存状态到本地存储失败:', err);
  }
};

// 创建Redux store时传入加载的初始状态
const store = createStore(
  rootReducer,
  loadSavedState(),
  applyMiddleware(thunk) // 按需添加你的中间件，如redux-thunk、redux-saga等
);

// 订阅store变化，状态更新时自动保存
store.subscribe(() => {
  saveCurrentState(store.getState());
});

使用redux-persist简化操作 #

若状态结构复杂，推荐用redux-persist库简化持久化流程：

1. 安装依赖：npm install redux-persist
2. 配置示例：

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 默认使用localStorage

const persistConfig = {
  key: 'root', // 存储的键名
  storage,
  // 可选：指定需要持久化的reducer
  // whitelist: ['charger', 'userInfo']
  // 或排除不需要持久化的reducer
  // blacklist: ['tempState']
};

// 包装根reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);

// 创建store和persistor
const store = createStore(persistedReducer);
const persistor = persistStore(store);

// 在根组件中用PersistGate包裹应用
// import { PersistGate } from 'redux-persist/integration/react';
// <PersistGate loading={null} persistor={persistor}>
//   <你的根组件 />
// </PersistGate>

注意事项 #

• 敏感数据（如用户token）建议使用sessionStorage（关闭浏览器自动清空），或加密后再存入localStorage；
• 避免持久化临时状态（如弹窗显示状态），减少存储占用并避免影响应用体验。

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