子组件中的useSelector重新呈现父组件

Question

我是新来的人，我开始使用redux，但是我注意到，每次我的子组件（图标包）更改整个标题组件重新呈现的包中的项目数时，我都会注意到。我已经尝试过，

• useMemo
• createSelector
• React.memo（Header）

有什么建议吗？

标题组件

const Header = ({ currentUser }) => {
    const { hidden } = useSelector(state => state.cart);

    return (
        <div className="header">
            ...
            <div className="options">
                ...
                <CartIcon />
            </div>

        </div>);
};

export default Header;

购物车图标组件

const CartIcon = () => {
    const selectCartItems = createSelector(
        state => state.cart,
        cart => cart.cartItems
    );
    const cartItems = useSelector(selectCartItems);
    const dispatch = useDispatch();

    const totalItemsCount = (cartItems) => {
        return cartItems.reduce((acc, crr) =>
            acc + crr.quantity
            , 0)
    };
    const totalItems = useMemo(() => totalItemsCount(cartItems), [cartItems])

    return (
        <div className="cart-icon" onClick={(() => dispatch(actionCreators.onToggleCart()))}>
            <ShoppingIcon className="shopping-icon" />
            <span className="item-count">{totalItems}</span>
        </div>
    );
};

export default CartIcon;

Answer 1

这很可能是因为您的state.cart值正在使用购物车中的物品进行更新。 useSelector会在返回的引用发生更改时强制重新呈现，因此Header在任何购物车数据发生更改时都会重新呈现。

您应将其更改为仅选择Header组件所需的数据 ：

const hidden = useSelector(state => state.cart.hidden);

Answer 2

在Header中，如果hidden更改值，则组件将重新呈现。

dispatch(actionCreators.onToggleCart())正在更新state.cart吗？

您应该从标题的hidden退订，以测试这是否导致重新渲染。