Правильно ли реализовать такую логику на 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 шт):
Смотрите - у Вас есть вычисляемое поле (чистая функция от 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
