useDispatch 渲染不变的孩子

Question

这是一个功能组件，带有一个挂钩到 Redux 商店以获取产品。此外，我定义了 removeFromCart 挂钩以从产品列表中删除一个项目。

const ProductListHooks = () => {
  const products = useSelector( state => state.productsModule.products);
  const removeFromCart = useDispatch({ type:actions.REMOVE_FROM_CART});
  return (
    <>
      {products.map(product => {
        return (
          <ProductItem
            product={product}
            key={product.id}
            removeFromCart={removeFromCart}
          />
        );
      })}
    </>
  );
};

问题： 当我调用 removeFromCart 时，它删除了该项目，但 re-render 列表中的所有其他项目。我该如何解决？

Answer 1

可能不漂亮，但你可以记住每个项目：

const ProductItem = function memo({ product, removeFromCart }) {
 return useMemo(() => 
       <Item product={product} removeFromCart={removeFromCart} />
    , [product]);

}

useDispatch 渲染不变的孩子

useDispatch render unchanged childern

rerender

reactjs

redux

react-hooks