Next.js中调用addToCartHandler时Redux Store的cartItems无法接收数据

问题重现 #

开发电商网站时，点击"ADD TO CART"按钮触发addToCartHandler函数，尝试向cartItems添加数据时出现错误：

TypeError: Cannot read properties of undefined (reading 'push')

该错误表明state.cartItems数组未被正确初始化或无法访问。

排查出的问题点 #

1. dispatch调用语法错误：addToCartHandler中dispatch(addToCart(...))的括号未正确闭合，导致代码执行异常
2. Redux Persist状态结构潜在不匹配：持久化恢复时可能出现状态结构异常，导致cart状态未正确加载
3. useSelector冗余解构：写法可优化，避免不必要的结构复制

分步解决方案 #

1. 修复dispatch语法错误 #

在productPage的addToCartHandler函数中，补全缺失的闭合括号：

// 原错误代码
dispatch(
  addToCart({
  ...data,
  qty,
  size: data.size,
  _uid,
});

// 修正后
dispatch(
  addToCart({
    ...data,
    qty,
    size: data.size,
    _uid,
  })
);

2. 确保Redux Persist状态结构正确 #

确认cartSlice初始状态结构，同时保证persist配置正确包裹合并后的reducers：

// store/cartSlice.js 确认初始状态
const initialState = {
  cartItems: [],
};

// store/index.js 确认persist配置
const reducers = combineReducers({ cart });
const config = {
  key: "root",
  storage,
};
const reducer = persistReducer(config, reducers);

3. 优化useSelector使用 #

简化productPage中useSelector的写法，直接获取cart状态：

// 原代码
const { cart } = useSelector((state) => ({ ...state }));

// 优化后
const cart = useSelector((state) => state.cart);

4. 添加防御性检查 #

在cartSlice的addToCart reducer中，添加检查确保cartItems为数组：

addToCart(state, action) {
  console.log("Adding to cart:", action.payload);
  // 确保cartItems是数组类型
  if (!Array.isArray(state.cartItems)) {
    state.cartItems = [];
  }
  state.cartItems.push(action.payload);
},

验证步骤 #

1. 修正代码后，清除浏览器本地存储（避免旧持久化状态干扰）
2. 重启开发服务器
3. 选择商品规格后点击"ADD TO CART"，检查控制台是否仍有报错，同时查看console.log("Cart state:", cart)输出是否正常显示cartItems数组

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