反應：如何從 redux 存儲在渲染組件中的數據？

Question

在我的 redux 商店中，我有產品和購物車項目。 當我渲染每個產品時，我還會在每個產品上提供一個名為 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));

我們在這里所做的是，我們使用作為參數傳入的id從 cartItems 數組中獲取目標產品，然后訪問該產品的數量。 如果 products[] 列表很大並且 cartItems[] 也很大，這將對性能非常不利。 嘗試使用 object 來存儲 cartItems{} 並像訪問它一樣

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

這種方法非常高效，因為沒有循環，它是 O(1)。

希望這能回答你的問題。

Answer 2

我希望您使用 combinereducer 將減速器正確連接到全局存儲，如果您連接了，那么您可以像這樣使用 - 從 react-redux 導入useSelector ，因為您使用的是反應鈎子，

import { useSelector} from 'react-redux';

只需像這樣在 function 中調用 useSelector 即可獲取數據

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