Redux-Persist结合REST API使用疑问及购物车状态丢失排查

基础认知问题 #

• 使用REST API的应用完全可以用Redux-Persist，两者没有冲突。Redux-Persist的作用是把前端Redux状态持久化到浏览器本地存储（如localStorage/sessionStorage），和后端无关，不需要自建后端。你可以同时用REST API和后端交互数据，用Redux-Persist保存前端的临时状态（比如购物车、用户偏好）。
• 如果不想用Redux-Persist，Redux-Toolkit项目也能手动实现状态持久化：
  • 在reducer初始化时，从localStorage读取之前保存的状态作为初始值
  • 在状态更新后，通过store.subscribe()监听变化，把最新状态存入localStorage
  • 但Redux-Persist已经封装好了这些逻辑，是更高效的选择

购物车状态不持久化的代码问题 #

你的代码里存在核心错误：在configureStore的reducer配置中，同时声明了persistedReducer和cart两个分支，而你的组件应该是在读取cart分支的状态，但这个分支并没有被持久化。真正被持久化的persistedReducer分支根本没被使用，所以重启浏览器后cart分支回到初始值，购物车为空。

修正后的Store.js代码 #

import { configureStore } from '@reduxjs/toolkit'; // 补上缺失的导入
import cartReducer from "./features/Cart/cartSlice"
import modalReducer from "./features/Modal/modalSlice"

//Persist
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";

const persistConfig = {
    key: "persist-key",
    storage
}

const persistedReducer = persistReducer(persistConfig, cartReducer)

const store = configureStore({
    reducer: {
        cart: persistedReducer, // 直接用持久化后的reducer作为cart分支
        modal: modalReducer,
    },
    middleware: (getDefaultMiddleware) => getDefaultMiddleware({
        serializableCheck: false
    })
})

const persistor = persistStore(store)

export default store;
export { persistor }

修正说明 #

1. 补上了configureStore的导入（原代码遗漏，会导致运行报错）
2. 移除了冗余的persistedReducer分支，把持久化后的reducer直接赋值给cart分支，这样组件读取的cart状态就是被持久化的版本
3. 其他配置保持不变，Index.js的代码无需修改

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