React Redux中localStorage状态刷新被覆盖？如何实现状态持久化

刷新后新增用户覆盖旧数据，核心是两处配置错误：

1. 持久化数据未正确注入初始状态
   你从localStorage读取到persistedState后，把它当成了顶层state的一个独立字段塞进initialState，但combineReducers只会识别和reducer同名的顶层key（也就是cats、users），多余的persistedState字段会被直接忽略，等于读出来的本地数据根本没生效，刷新后Redux里的users数组始终是空数组，新增用户时自然只会保留新数据，旧内容看起来就被覆盖了。
2. 本地存储数据结构不匹配
   从你贴的localStorage日志看，存进去的结构是{users: [用户列表], loading: false}，这其实是state.users切片的结构，不是Redux顶层state的结构（顶层应该是{cats: ..., users: {users: [...], loading: ...}}），结构错位也会导致读取的数据无法正确对应到state字段。

1. 修正Store初始化逻辑 #

不要把持久化数据作为单独字段，直接将其作为初始state传入，没有本地数据时再使用默认空值：

// Store
const reducer = combineReducers({
  cats: getCatReducer,
  users: registerReducer,
})

const persistedState = loadState();

// 优先使用本地持久化数据作为初始值，无本地数据时使用默认空状态
const initialState = persistedState ?? {
  cats: {cat: []},
  users: {users:[]},
}

const store = configureStore(
  {
    reducer,
    initialState,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(thunk),
  })

// 建议添加节流逻辑，避免频繁写入localStorage影响性能
store.subscribe(() => {
  saveState(store.getState());
});

export default store

2. （可选）优化存储逻辑 #

不需要全量存储所有state字段，只持久化需要保留的users切片即可，减少序列化开销和存储占用：

export const saveState = (state) => {
  try {
    const serializedState = JSON.stringify({
      // 只存需要持久化的users数据，cats等不需要留存的数据不用存
      users: state.users
    });
    localStorage.setItem('state', serializedState);
  } catch (error) {
    console.log(error.message)
  }
};

修改完成后：

• 刷新页面时，Redux会直接从localStorage读取之前存的用户列表作为初始值，DevTools里可以看到state.users.users初始就带有旧数据
• 新增用户时，会在已有旧数组的基础上追加新用户，不会再出现覆盖情况
• UI上刷新后旧用户会正常展示，新增操作也不会清空原有列表

注：你的reducer、组件、action部分逻辑没有问题，不需要修改。

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