如何从Redux Store获取数组？解决购物车商品添加失败问题

问题根源 #

• 属性名拼写不一致：初始状态定义的是productsArr，但reducer和组件中误写为productArr（缺少末尾的s），导致始终未修改到正确的状态属性。
• concat方法使用错误：concat()会返回新数组，不会修改原数组，因此原items数组始终为空。
• totalQuantity未初始化：初始状态中未定义totalQuantity，直接累加会引发报错。

修复后的代码 #

1. Cart Slice 修正 #

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

const initialState = {
  productsArr: {
    items: [],
    totalQuantity: 0, // 初始化totalQuantity
  },
};

const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    addItemToCart: (state, action) => {
      // 用push直接修改数组（Redux Toolkit的Immer会自动处理不可变更新）
      state.productsArr.items.push({
        id: action.payload.productId,
        title: action.payload.productTitle,
      });
      state.productsArr.totalQuantity += 1;
    },
  },
});

export const { addItemToCart } = cartSlice.actions;
export default cartSlice.reducer;

2. Cart组件修正（修正状态路径） #

const Cart = (props) => {
  // 修正状态路径为productsArr，与初始状态结构保持一致
  const cartItems = useSelector((state) => state.cart.productsArr.items);
  console.log(cartItems);

  return(
    <Card className={classes.cart}>
      <h2>Your Shopping Cart</h2>
      <ul>
        {cartItems.map((cartItem) => (
          <CartItem
            key={cartItem.id} // key需放在组件最外层，而非item对象内部
            item={{
              title: cartItem.title,
              // quantity: item.quantity,
              // total: item.totalPrice,
              // price: item.price,
            }}
          />
        ))}
      </ul>
    </Card>
  )
};

从Store获取数组的正确方式 #

使用Redux的useSelector钩子，传入选择器函数指定状态路径即可：

// 从cart切片中获取productsArr下的items数组
const cartItems = useSelector(state => state.cart.productsArr.items);

注意路径必须与slice中定义的初始状态结构完全匹配，否则会拿到undefined或空值。

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