Slice Reducer状态无法实时更新：购物车添加商品状态变更失败

你的代码里有几个逻辑问题导致状态无法实时更新：

1. 当商品已存在时，直接return新状态但未同步更新localStorage，且后续状态判断逻辑被跳过；
2. 当购物车为空（state.cartItems[0]不存在）时，最后一段状态更新代码不会执行，添加商品后状态无变化；
3. 重复维护cart变量和state.cartItems，容易出现数据不一致。

下面是修复后的代码，同时满足实时更新状态和同步localStorage的需求：

import { createSlice } from "@reduxjs/toolkit";

let initialState = {
    cartItems: JSON.parse(localStorage.getItem("cart")) || [],
};

const CartReducer = createSlice({
    name: "cart",
    initialState,
    reducers: {
        ADD_TO_CART(state, action) {
            const item = action.payload.product;
            // 判断商品是否已在购物车中
            const existingItem = state.cartItems.find(i => i._id === item._id);
            
            if (existingItem) {
                // 已存在则更新该商品
                state.cartItems = state.cartItems.map(i => 
                    i._id === item._id ? item : i
                );
            } else {
                // 不存在则添加新商品
                state.cartItems.push(item);
            }
            
            // 同步更新localStorage，直接用最新的state.cartItems
            localStorage.setItem("cart", JSON.stringify(state.cartItems));
        },
        ADD_TO_CART_RESET(state) {
            state.message = undefined;
        },
    },
});

export const { ADD_TO_CART, ADD_TO_CART_RESET } = CartReducer.actions;
export default CartReducer.reducer; // 修正导出：需导出slice的reducer供store使用

关键修改点： #

• 利用Redux Toolkit的Immer特性，直接修改state（无需手动return新对象，Immer自动生成不可变状态）；
• 先完成state更新，再统一将state.cartItems存入localStorage，确保两者数据完全一致；
• 移除冗余的重复判断逻辑，简化流程；
• 修正导出逻辑：原代码导出整个slice，需改为导出CartReducer.reducer才能被store正确识别。

修改后，dispatch ADD_TO_CART时会同时更新redux状态和localStorage，页面刷新时也能从localStorage读取初始状态，完全满足需求。

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