如何在页面刷新时保留Redux Store中的广告详情数据？

方法一：使用redux-persist（推荐） #

这是Redux生态里专门做状态持久化的工具，能自动帮你把指定状态同步到本地存储，刷新后自动恢复。

1. 安装依赖

npm install redux-persist
# 或用yarn
yarn add redux-persist

2. 修改Redux配置
   在store配置文件中，用persist相关方法包装你的reducer：

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

// 配置持久化规则
const persistConfig = {
  key: 'root', // 存储的根键名
  storage,
  whitelist: ['adDetail'] // 只持久化adDetail状态，不需要的可排除
};

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

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

3. 在根组件中包裹PersistGate

import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

配置完成后，adDetail状态会自动存入localStorage，刷新页面时会自动读取并恢复到Redux store中。

方法二：手动利用localStorage/sessionStorage #

如果不想额外引入依赖，可以手动监听store变化，把需要持久化的数据存到本地，初始化时再读取回来。

1. 在reducer中直接处理存储

// 初始化时读取本地保存的广告详情
const initialState = {
  adDetail: JSON.parse(localStorage.getItem('adDetail')) || {}
};

const rootReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'SET_AD_DETAIL':
      const newAdDetail = action.payload;
      // 同步存入localStorage
      localStorage.setItem('adDetail', JSON.stringify(newAdDetail));
      return { ...state, adDetail: newAdDetail };
    default:
      return state;
  }
};

export const store = createStore(rootReducer);

2. 或用store.subscribe监听全局状态变化

store.subscribe(() => {
  const state = store.getState();
  // 只保存需要的adDetail部分
  localStorage.setItem('adDetail', JSON.stringify(state.adDetail));
});

这种方式适合状态结构简单的场景，需要自己处理序列化和读取逻辑。

注意事项 #

• 不要将敏感数据存入localStorage，它是明文存储的，存在安全风险。
• 如果需要会话结束后自动清除数据，把localStorage换成sessionStorage即可。
• 复杂状态建议用redux-persist，它支持嵌套状态、黑白名单配置，能处理更多序列化边缘情况。

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