Redux 状态持久化：浏览器中的实现方法

/**
 * 从 localStorage 反序列化读取指定名称的值。
 * 如果值不存在或反序列化失败，则返回 null。
 * @param {string} name 存储在 localStorage 中的键名。
 * @returns {any | null} 反序列化后的值，或 null。
 */
export const loadState = (name) => {
  try {
    const serialState = localStorage.getItem(name);
    if (serialState === null) {
      return null;
    }
    return JSON.parse(serialState);
  } catch (err) {
    console.error("Failed to load state from localStorage:", err);
    return null;
  }
};

/**
 * 将值序列化后存储到 localStorage。
 * 失败时会静默处理（打印错误信息）。
 * @param {string} name 存储在 localStorage 中的键名。
 * @param {any} state 需要存储的状态对象。
 */
export const saveState = (name, state) => {
  try {
    const serialState = JSON.stringify(state);
    localStorage.setItem(name, serialState);
  } catch (err) {
    console.error("Failed to save state to localStorage:", err);
  }
};

const uiConfigStateLocalStorageKey = "uiConfig-v1"; // 定义一个唯一的 localStorage 键
const initialUiConfigState = {"a": "1", "b": "2"};

/**
 * 执行 action 并返回更新后的状态，同时处理状态持久化。
 * @param {object | undefined} state 当前状态。
 * @param {object} action 触发的状态更新动作。
 * @returns {object} 更新后的状态。
 */
export function uiConfigReducer(state, action) {
  // 1. 初始化时加载状态
  if (state === undefined) {
    const persistedState = loadState(uiConfigStateLocalStorageKey);
    if (persistedState === null) {
      state = initialUiConfigState;
      console.log("Initializing state with default values.");
    } else {
      state = persistedState;
      console.log("Restoring state from localStorage:", state);
    }
  }

  let nextState = state; // 假设默认情况下状态不变

  switch(action.type) {
    case "ACTION1": // 假设有一个名为 ACTION1 的 action 类型
      nextState = {
        ...state,
        b: "3",
      };
      break;
    // 其他 action 类型处理...
    default:
      // 如果没有匹配的 action，nextState 保持为当前 state
      break;
  }

  // 2. 状态更新后保存状态
  // 只有当状态实际发生改变时才保存
  if (nextState !== state) {
    console.log("Saving state to localStorage:", JSON.stringify(nextState));
    saveState(uiConfigStateLocalStorageKey, nextState);
  }

  return nextState;
}