如何在浏览器中持久化Redux reducer的状态？

针对你给出的uiConfigReducer，要在页面刷新间持久化UI配置状态，最常用的是借助浏览器的localStorage（持久化存储，关闭浏览器也保留）或sessionStorage（会话级存储，关闭标签页就清除），核心思路是初始化时从存储读取状态，状态更新时同步写入存储。

步骤1：修改初始状态的读取逻辑 #

把原来硬编码的初始状态，改成优先从localStorage读取，读取失败或不存在时再用默认值：

const initialUiConfigState = {"a": "1", "b": "2"};

// 从localStorage加载持久化的状态
const loadPersistedState = () => {
  try {
    const serializedState = localStorage.getItem('uiConfig');
    return serializedState ? JSON.parse(serializedState) : initialUiConfigState;
  } catch (err) {
    // 读取失败时回退到默认状态
    console.error('加载UI配置状态失败:', err);
    return initialUiConfigState;
  }
};

export function uiConfigReducer(state = loadPersistedState(), action) {
  switch(action.type) {
    case ACTION1:
      return {
        ...state,
        b: "3",
      };
    default:
      return state;
  }
}

步骤2：监听Redux状态变化，同步写入存储 #

因为reducer必须是纯函数（不能包含读写localStorage这种副作用操作），所以需要在Redux store层面监听状态变化，当uiConfig状态更新时，自动写入localStorage：

import { createStore, combineReducers } from 'redux';
import { uiConfigReducer } from './path-to-reducer';

const rootReducer = combineReducers({
  uiConfig: uiConfigReducer,
  // 其他reducer...
});

const store = createStore(rootReducer);

// 订阅状态变化，同步存储uiConfig
store.subscribe(() => {
  try {
    const serializedState = JSON.stringify(store.getState().uiConfig);
    localStorage.setItem('uiConfig', serializedState);
  } catch (err) {
    console.error('保存UI配置状态失败:', err);
  }
});

export default store;

可选：用自定义中间件优化逻辑 #

如果项目需要持久化多个状态切片，或者想让逻辑更优雅，可以自定义中间件统一处理持久化：

import { createStore, combineReducers, applyMiddleware } from 'redux';

const persistMiddleware = store => next => action => {
  const result = next(action);
  // 只针对uiConfig状态做持久化
  const uiConfig = store.getState().uiConfig;
  try {
    localStorage.setItem('uiConfig', JSON.stringify(uiConfig));
  } catch (err) {
    console.error('持久化UI配置失败:', err);
  }
  return result;
};

const rootReducer = combineReducers({
  uiConfig: uiConfigReducer,
  // 其他reducer...
});

const store = createStore(
  rootReducer,
  applyMiddleware(persistMiddleware)
);

export default store;

注意事项 #

• 存储的状态必须是可序列化的JSON格式，不要在状态里存函数、Symbol等不可序列化的值。
• 可根据需求选择localStorage或sessionStorage，前者长期保存，后者仅在当前会话有效。
• 读取和存储时要加try/catch，避免浏览器禁用存储或存储满时抛出错误导致应用崩溃。

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