Redux Toolkit+NextJS：移除购物车项后LocalStorage状态同步问题

我用Redux Toolkit、RTK Query、NextJS和TypeScript开发外卖App，添加购物车功能正常，但移除购物车项时出现异常：移除后购物车页UI更新正常，但美食菜单页状态异常，添加新项时已移除的项会被重新加入。经多标签页验证，LocalStorage更新是正常的。

已实现代码 #

购物车Slice的添加/移除逻辑

addToCart: (state, action) => {
      const itemIndex = state.items.findIndex(
        (item) => item.id === action.payload.id
      );

      if (itemIndex >= 0) {
        if (state.items[itemIndex].quantity_available === 0) {
          return state;
        }
        state.items[itemIndex].quantity += 1;
        state.items[itemIndex].quantity_available -= 1;
        state.items[itemIndex].total_price =
          (state.items[itemIndex].price + state.items[itemIndex].vat) *
          state.items[itemIndex].quantity;
      } else {
        state.items.push({
          ...action.payload,
          quantity: 1,
          quantity_available: action.payload.quantity_available - 1,
          total_price: action.payload.price + action.payload.vat,
        });
      }
    },
 removeCart: (state, action) => {
      console.log(action);
      return {
        ...state,
        items: state.items.filter((elem) => elem.id !== action.payload),
      };
    },

Redux Persist持久化配置

import { configureStore } from "@reduxjs/toolkit";
import { foodcartSlice } from "../features/slice";

import { api } from "../services/products";

//import redux persist
import {
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";
import storage from "redux-persist/lib/storage";

import useFoodCartReducer from "../features/slice";

const persistConfig = {
  key: "cart",
  version: 1,
  storage,
};

const persistedReducer = persistReducer(persistConfig, useFoodCartReducer);

export const store = configureStore({
  reducer: {
    [api.reducerPath]: api.reducer,
    cart: persistedReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }).concat(api.middleware),
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;

尝试过的方案 #

• 购物车页用useEffect监听页面可见性变化，触发页面刷新：能解决问题但体验差
• 在reducer中添加reloadCart方法直接读取LocalStorage：存在类型错误，加空断言后导致LocalStorage数据混乱，组件报错

reloadCart: (state, action) => {
      console.log("state", state, action);
      return {
        ...state,
        ...JSON.parse(localStorage.getItem("persist:cart")!), // yes I used redux persist for saving in localstorage
      };
    },

解决方案 #

1. 修复removeCart的Immer使用方式

Redux Toolkit的reducer基于Immer实现，虽然允许返回新对象，但直接修改state的方式更符合规范，也能确保状态变更被正确追踪（避免和Redux Persist的持久化流程冲突）：

removeCart: (state, action) => {
  state.items = state.items.filter(elem => elem.id !== action.payload);
},

2. 检查菜单页的状态订阅逻辑

确保菜单页通过useSelector实时获取最新的cart状态，而非使用组件内部缓存的旧数据：

import { useSelector } from 'react-redux';
import type { RootState } from '../store';

// 菜单页组件内
const cartItems = useSelector((state: RootState) => state.cart.items);

如果菜单页用RTK Query获取商品数据，添加商品时要基于最新的cartItems判断是否已存在，不要依赖组件内的缓存值。

3. 验证Redux Persist的reducer导入正确性

检查slice文件的reducer导出是否正确，避免重复导入导致的状态同步问题：

// slice文件中正确导出reducer
export const foodcartSlice = createSlice({
  // ...slice配置
});

export default foodcartSlice.reducer;

// store配置中导入正确的reducer
import foodCartReducer from '../features/slice';

4. 禁止在reducer中直接操作LocalStorage

Redux Persist会自动处理状态的持久化和重hydrate流程，直接读取/修改LocalStorage会破坏状态一致性，完全不需要手动干预。

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