除Local Storage外，Redux Store状态持久化还有哪些可行方法？

如果你不想用LocalStorage做Redux状态持久化，同时又担心性能问题，可以试试以下几种方案：

1. IndexedDB（推荐） #

IndexedDB是浏览器提供的异步存储API，不会阻塞主线程，支持存储大量数据，完美解决LocalStorage同步操作导致的性能瓶颈。可以通过redux-persist配合专门的IndexedDB存储适配器实现：

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist-indexeddb-storage';
import rootReducer from './path/to/rootReducer';

// 持久化配置
const persistConfig = {
  key: 'root',
  storage: storage('my-app-redux-db'), // 指定IndexedDB数据库名称
  whitelist: ['user', 'appSettings'] // 仅持久化指定reducer的状态
};

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

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

之后在应用入口处用PersistGate包裹组件，就能自动完成状态的持久化和恢复。

2. SessionStorage #

如果你的状态只需要在当前会话（浏览器标签页）内持久化，可以用SessionStorage替代LocalStorage。它同样是同步API，但数据会在标签页关闭后自动清除，适合临时状态存储。配合redux-persist的配置如下：

import { persistStore, persistReducer } from 'redux-persist';
import storageSession from 'redux-persist/lib/storage/session';
import rootReducer from './path/to/rootReducer';

const persistConfig = {
  key: 'session-root',
  storage: storageSession,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);
export const store = createStore(persistedReducer);
export const persistor = persistStore(store);

3. Service Worker Cache API #

如果你的应用是PWA，可以利用Service Worker的Cache API来存储Redux状态。它是异步操作，不会影响主线程性能，还能在离线时读取状态：

状态保存（Middleware示例） #

const cacheStateMiddleware = store => next => action => {
  const result = next(action);
  // 将状态存入Cache
  caches.open('redux-state-cache').then(cache => {
    cache.put('/redux-state', new Response(JSON.stringify(store.getState())));
  });
  return result;
};

初始化时加载状态 #

const loadStateFromCache = async () => {
  const cache = await caches.open('redux-state-cache');
  const response = await cache.match('/redux-state');
  return response ? await response.json() : undefined;
};

// 创建store时传入初始状态
const initialState = await loadStateFromCache();
const store = createStore(rootReducer, initialState, applyMiddleware(cacheStateMiddleware));

4. 后端服务器存储 #

如果需要跨设备同步状态，或者状态涉及敏感数据，可以将Redux状态同步到后端数据库。比如用户偏好设置、登录状态等：

保存状态到后端 #

export const saveUserSettings = (settings) => async (dispatch) => {
  dispatch({ type: 'UPDATE_SETTINGS', payload: settings });
  // 调用后端API持久化
  await fetch('/api/user/settings', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(settings)
  });
};

初始化时从后端加载状态 #

const loadInitialState = async () => {
  const response = await fetch('/api/user/settings');
  const settings = await response.json();
  return { user: { settings } };
};

const initialState = await loadInitialState();
const store = createStore(rootReducer, initialState);

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