Правильно ли реализован код?

Question

[StepanSnigur]

Здравствуйте. Я только начал изучать Redux, создал приложение-магазин. При клике на кнопку "добавить в корзину" у товара меняется флажок inCart, и уже потом по этому флажку определяется попадет товар в корзину, или нет. Сам вопрос: правильная ли реализация? Или нужно делать по другому? Вот код корзины:

import React, { Component } from 'react';
import { connect } from "react-redux";

import Goods from './Goods';

class Magazine extends Component{

    goodsHandler = (items) => {
        let sum = 0;
        for (let item of items) {
            if (item.inCart) {
                sum += parseInt(item.price);
            }
        }
        return sum; //это сумма цен товаров в корзине, я отрисовываю именно ее
    }

    render() {
        return (
            <div>
                <h1>Total: <span>{this.goodsHandler(this.props.goods)}</span></h1>
                <Goods />
            </div>
        )
    }
}

let mapStateToProps = (state) => {
    return {
        goods: state
    }
}

export default connect(mapStateToProps)(Magazine);

Answer 1

[Антон Спирин]

Неправильно. По-хорошему у вас должно быть состояние корзины с объектами описывающими позиции. Как минимум это количество и id продукта:

{
  product_id: "223af-b4535-54e21-31233-12a122-b453d",
  quantity: 2.
}

По ним уже циклом и отображают позиции корзины, подставляя нужные товары.
Total будет надежней считать в редьюсере. Значение total надо пересчитывать заново при каждом добавлении/удалении позиций из корзины и изменении их количества. Для этого будет удобно складывать в объект позиции еще и цену товара.

Comments

[StepanSnigur]

Спасибо. Это не боевой прооект, поэтому с id и прочим я не заморачивался.