如何在react中添加项目(obj)到redux状态

Question

当我试图添加一个项目(obj)时，我得到了一个空数组。但当我尝试使用useState时数据被保存在一个数组中但它不会与另一个项目(obj)一起保存它只会添加最近点击的项目基本上我想将项目存储在状态中以便它可以在其他组件中使用

请纠正我的错误，谢谢

const handlecart=(item)=>{
setCount(count+1)
const data={name:item.name,image:item.image,price:item.price}
dispatch(addingToCart(data))
console.log(cart)
}
{localitem.map((product) => (
<div key={product._id} className="group relative">
<div className="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
<img
src={product.image}
alt={"image"}
className="w-full h-full object-center object-cover lg:w-full lg:h-full"
/>
</div>
<div className="mt-4 flex justify-between">
<div>
<h3 className="text-sm text-gray-700 font-semibold">
{product.name}
</h3>
<h4 className="text-base font-medium text-gray-900">
Price<p>{product.price}</p> 
${product.price}
</h4>
</div>
<div className="px-3">
<button>buy</button>
<button onClick={()=>handlecart(product)}>cart</button>
</div>
</div>
</div>
))}

Answer 1

当您查看上述reducer中的返回值时，您只是用单个对象覆盖了处于状态的cart。理想情况下，购物车是一个商品列表，每当您向购物车中添加商品时，您需要将其添加到现有的cart数组中。

import {
createSlice
} from "@reduxjs/toolkit";
const initialState = {
cartItem: [],
}
export const cartSlice = createSlice({
name: "cart",
initialState,
reducers: {
addingToCart: (state, action) => {
const previousCart = [...state.cartItem];
return {
...state,
cartItem: [...previousCart, action.payload],
};
},
},
});
export default cartSlice.reducer;
export const {
addingToCart
} = cartSlice.actions;

Answer 2

如果您的操作是异步的，您可以使用unwrap来查看发生了什么。如:dispatch(addingToCart(data)) .unwrap() .then((res) =>{ console.log(res} ) .catch(err => { console.log(err)}