Redux状态持久化：浏览器中保存Reducer状态的实践指南

// Deserialises a value from the local storage.
// Returns null when the value is missing or the deserialisation fails.
export const loadState = (name) => {
  try {
    const serialState = localStorage.getItem(name);
    if (serialState === null) {
      return undefined; // 返回 undefined，让 Reducer 使用其默认初始状态
    }
    return JSON.parse(serialState);
  } catch (err) {
    console.error("Failed to load state from localStorage:", err);
    return undefined; // 发生错误时也返回 undefined
  }
};

// Serializes a value into the local storage.
// Can fail silently.
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 = "app-ui-config-v1";

// 初始UI配置状态
const initialUiConfigState = {"a": "1", "b": "2"};

// 执行操作并返回更新后的状态的Reducer
export function uiConfigReducer(state, action) {
  // 1. 状态初始化：如果state为undefined，尝试从localStorage加载
  if (state === undefined) {
    const loadedState = loadState(uiConfigStateLocalStorageKey);
    if (loadedState === undefined) { // 如果加载失败或不存在，使用默认初始状态
      state = initialUiConfigState;
    } else {
      state = loadedState;
      console.log("Restoring state from localStorage:", state);
    }
  }

  let changedState = null; // 用于存储reducer处理后的新状态

  // 2. 根据action类型更新状态
  switch(action.type) {
    case 'ACTION1': // 假设有一个名为ACTION1的动作类型
      changedState = {
        ...state,
        b: "3",
      };
      break;
    case 'ACTION2':
      // 示例：处理其他动作
      changedState = {
        ...state,
        a: action.payload.value,
      };
      break;
    default:
      // 如果没有匹配的动作，则不改变状态
      changedState = state;
      break;
  }

  // 3. 状态保存：如果状态发生了改变（或需要每次都保存），则保存到localStorage
  // 这里的逻辑可以优化为只在状态实际改变时才保存
  if (changedState !== state) { // 检查状态是否真的发生了变化
    console.log("Saving state to localStorage:", JSON.stringify(changedState));
    saveState(uiConfigStateLocalStorageKey, changedState);
  }

  return changedState; // 返回最终的状态
}

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

const persistConfig = {
  key: 'root', // 存储在localStorage中的键名
  storage,
  // whitelist: ['uiConfig'], // 只有 uiConfig reducer 的状态会被持久化
  // blacklist: ['someEphemeralState'], // 排除某些状态
};

// 创建一个持久化的 reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);

export default () => {
  let store = createStore(persistedReducer);
  let persistor = persistStore(store);
  return { store, persistor };
};