useSelector в дочернем компоненте повторно отображает родительский компонент

Question

Я новичок в реакции, и я начинаю играть с redux, но я заметил, что каждый раз, когда мой дочерний компонент (пакет значков) меняет количество элементов в сумке, повторно визуализируется весь компонент заголовка. Я пробовал,

• useMemo
• createSelector
• React.memo (Header)

Есть предложения?

HEADER COMPONENT

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

    return (
         ... ...  ); }; экспорт заголовка по умолчанию; 

КОМПОНЕНТ ЗНАЧКА КОРЗИНЫ

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 в заголовке, чтобы проверить, вызывает ли это повторный рендеринг.