Правильно ли реализовать такую логику на Redux или какие советы могут быть лучше?

Есть корзина товаров, добавления и хранения сделал через Redux. Есть разные action.type, добавить в корзину, удалить из корзины, добавить единицу, удалить единицу и.т.п Так же надо было во время обновления посчитать финальную цену. Думал для каждого action.type добавить цикл map и пройтись по всем ценам, однако это работает с опозданием в 1 клик , стейт обновляется. Сделал следующий образом но мне кажется не совсем корректным, хотя работает отлично

Заметил что при любом изменений стейта у нас срабатывает componentDidUpdate и за чего добавил такой код

componentDidUpdate(prevProps, prevState, snapshot) {
    const products = this.props.cart
    let totalPrice = 0
    products.map(item =>{
      totalPrice += item.priceGroup
    })
    this.props.updatePrice(totalPrice)
  }


export function updatePrice(totalPrice){
  return{
    type: UPDATE_PRICE,
    totalPrice
  }
}

case UPDATE_PRICE:
      return {
        ...state,
        totalPrice: action.totalPrice
      }

Как и говорил все работает) но при Update_PRICE срабатывает еще раз componentDidUpdate т.е он работает 2 раза на каждую итерацию( сначала на изменения количество, а потом еще раз и за того что цену обновил и state обновился) Какие могут быть более корректные решения Структура такая

введите сюда описание изображения


Ответы (1 шт):

Автор решения: Gayrat Vlasov

Смотрите - у Вас есть вычисляемое поле (чистая функция от redux store) и Вы его вычисляете в componentDidUpdate - это как раз полбеды :)

А если totalprice надо записать в нескольких местах ? - каждый раз вычислять в каждом компоненте ?

Вторая беда - что вычислив его Вы вызываете dispatch action что естественно ведет к повторному рендеру - а в некоторых случаях может привести к бесконечному циклу :)

Как лучше сделать ? Я бы в reducer при изменении цены/количества товара автоматом бы менял и total sum

Вариант 2 (хуже) Мемоизируйте вычисление в компоненте и конечно не вызывайте dispatch на вычисляемое поле https://medium.com/@mohsentaleb/how-to-effectively-memoize-methods-in-react-class-components-with-lodash-a6df0569dd5a

→ Ссылка