反应：如何从渲染组件中的 redux 存储中获取数据？答案

【问题标题】：react: how to get data from redux store in a rendered component?反应：如何从渲染组件中的 redux 存储中获取数据？
【发布时间】：2020-11-05 23:02:53
【问题描述】：

在我的 redux 商店中，我有产品和 cartItems。当我渲染每个产品时，我还会在每个产品上提供一个名为 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>
  );
};

【问题讨论】：

标签： javascript reactjs redux react-redux jsx

【解决方案1】：

您说您有一个名为cartItems[] 的reducer，并且在用户单击添加到购物车按钮后您将product{} 存储在其中。好吧，简单的逻辑。现在你想要的是一个名为quantity 的属性，它位于cartItems[] 的每个产品中。您可以使用 redux 的 useSelector 钩子获取该属性（因为您使用的是钩子）。

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

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

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

这种方法非常高效，因为没有循环，它是 O(1)。

希望这能回答你的问题。

【讨论】：

【解决方案2】：

我希望你使用 combinereducer 将 reducer 正确连接到全局存储，如果你连接了，那么你可以像这样使用 - 从 react-redux 导入 useSelector，因为您使用的是反应钩子，

import { useSelector} from 'react-redux';

然后像这样在函数内部调用 useSelector 来获取数据

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

【讨论】：