«Уменьшить» в использованииSelector

Question

Я не очень хорошо говорю по-английски sh, но я попробую.

Я давно искал это и не мог найти ясного решения, я использую React Hook для создания электронной коммерции и в моем глобальном магазине есть список товаров, которые есть в моей корзине.

Мне нужно рассчитать продукты для общего количества шоу, как я могу запустить ".reduce" из моего список продуктов?

¿Нужно ли создать useState?

Список продуктов моей корзины, в ней есть эта схема

[{
    id: 5,
    quantity: 3
},{
    id: 23,
    quantity: 1
}]

Я думал сделать это следующими способами

ВАРИАНТ 1: (без useState, это допустимо?)

import React from 'react';
import { useSelector } from 'react-redux';

const Cart = () => {
  const cart = useSelector((state) => state.myCart); // list cart
  const count = cart.reduce((total, product) => {
    return total + product.quantity;
  }, 0);

  return (
    <div>
      <span>{count}</span>
    </div>
  );
};

export default Cart;

ВАРИАНТ 2: Эта опция немного задерживается при показе счетчика

import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';

const Cart = () => {
  const cart = useSelector((state) => state.myCart); // list cart
  const [count, setCount] = useState(0) 

  useEffect(() => {

    setCount(cart.reduce((total, product) => {
        return total + product.quantity;
      }, 0));

  }, [cart])


  return (
    <div>
      <span>{count}</span>
    </div>
  );
};

export default Cart;

Какой лучший способ сделать это?

Спасибо.

Answer 1

Если вы только отображаете счет, вы также можете переместить уменьшение в обратный вызов функции селектора. Селекторы позволяют возвращать состояние, однако компонент потребляет его.

import React from "react";
import { useSelector } from "react-redux";

const cartCountSelector = state =>
  state.myCart.reduce((total, product) => {
    return total + product.quantity;
  }, 0);

const Cart = () => {
  const count = useSelector(cartCountSelector); // list cart count

  return (
    <div>
      <span>{count}</span>
    </div>
  );
};

export default Cart;