Question

在我的redux商店中，我有产品和cartItem。当我渲染每个产品时，我还在每个产品上都提供了一个名为addToCart的按钮。因此，当我单击按钮时，该项目将添加到cartItems数组（商店）中

现在，每个购物车商品都具有数量属性。这样，如果再次调用添加到购物车按钮，我会增加数量。

我想要的是我渲染的产品组件中该cartItem数量的值。这样我就可以有条件地将“添加到购物车”按钮的文本内容设置为：

${cartItem.quantity} on bag

这是我的产品组件：

const Product = ({
  id,
  title,
  brand,
  price,
  image_url,
  addCartItem
}) => {
  const [isClicked, setIsClicked] = useState(false);

  const handleAddToCart = (id) => {
    setIsClicked(true);
    addCartItem(id);
  };


  return (
    <div className='product'>
      {/* <Link to={`/product/${id}`}> */}
      <img src={image_url} alt={title} />
      <div className='title'>
        <span>{title}</span>
        <span>{brand}</span>
      </div>
      {/* </Link> */}
      <div className='actions'>
        <span>${price}</span>
        <button onClick={() => handleAddToCart(id)}>
          {isClicked ? `${I need quantity here} in Bag` : 'Add to Cart'}
        </button>
      </div>
    </div>
  );
};

Answer 1

您说您有一个名为cartItems[]的减速器，并且在用户单击添加到购物车按钮后将product{}存储在其中。好吧，简单的逻辑。现在，您需要的是quantity的每个乘积中的一个名为cartItems[]的属性。您可以使用redux的useSelector钩子获得该属性（因为您正在使用钩子）。

const { quantity } = useSelector(store => store.cartItems.find(item => item.id === id));

我们在这里所做的是，我们从cartItems数组中获取目标产品使用传入的id作为参数，然后访问该产品的数量。如果product []列表很大，而cartItems []也很大，那么这对性能将是非常不利的。尝试使用一个对象来存储cartItems {}并像访问它一样

const quantity = useSelector(store => store.cartItems[id].quantity);

这种方法非常有效，因为没有循环，它是O（1）。

希望这能回答您的问题。

Answer 2

我希望您可以使用Combinereducer将reducer正确连接到全局存储，如果您进行了连接，则可以这样使用- 由于您正在使用React钩子，因此从react-redux导入 useSelector ，

import { useSelector} from 'react-redux';

，只需在函数内部调用useSelector即可获取数据

  const taskDetails = useSelector((state) => (state.taskDetails.entities));

react：如何从渲染组件中的redux存储中获取数据？

2 个答案: