Что нужно поменять,чтоб было верное отображение?

Question

[Rebuslol]

При добавлении в корзину,идет неверное отображение. 1) Вместо одной пары,в корзине две 2) фото кед неверные

const initialState = {
    basketNumbers: 0,
    cartCost: 0,
    products: {
        blackBot: {
            name: 'Черные низкие',
            price: 10,
            numbers: 0,
            inCart: false
        },
        blackMonoBot: {
            name: 'Полностью черные низкие',
            price: 10,
            numbers: 0,
            inCart: false
        },
        redBot: {
            name: 'Красные низкие',
            price: 10,
            numbers: 0,
            inCart: false
        },
        redTop: {
            name: 'Красные высокие',
            price: 10,
            numbers: 0,
            inCart: false
        },
        whiteTop: {
            name: 'Белые высокие',
            price: 10,
            numbers: 0,
            inCart: false
        }
    }
}

export default (state = initialState, action) => {
    switch(action.type) {
        case ADD_PRODUCT_BASKET:
            let addQuantity = Object.values(state.products).find(n => n.name === action.payload)

            addQuantity.numbers += 1
            addQuantity.inCart = true

            return {
                ...state,
                basketNumbers: state.basketNumbers + 1,
                cartCost: state.cartCost + Object.values(state.products).find(({name}) => name === action.payload).price,
                products: {
                    ...state.products,
                    [action.payload]: addQuantity
                }
            }
        case GET_NUMBERS_BASKET:
            return {
                ...state
            }
        default:
            return state
    }
}

ну и сама корзина

function Cart({ basketProps }) {

    let productsInCart = []

    Object.keys(basketProps.products).forEach(function (item) {
        if (basketProps.products[item].inCart) {
            productsInCart.push(basketProps.products[item])
        }
    })

    const productImages = [converseblackbot, converseblackmonobot, converseredbot, converseredtop, conversewhitetop]

    productsInCart = productsInCart.map((product, index) => {
        return (
            <Fragment>
                <div className='product'><ion-icon name='close-circle'></ion-icon><img src={productImages[index]} alt='1'/>
                    <span className='sm-hide'>{product.name}</span>
                </div>
                <div className='price sm-hide'>{product.price}p</div>
                <div className='quantity'>
                    <ion-icon className='decrease' name='arrow-back-circle-outline'></ion-icon>
                    <span>{product.numbers}</span>
                    <ion-icon className='increase' name='arrow-forward-circle-outline'></ion-icon>
                </div>
                <div className='total'>{product.numbers * product.price}</div>
            </Fragment>
        )
    })

    return (
        <div className='container-products'>
            <div className='product-header'>
                <h5 className='product-title'>product</h5>
                <h5 className='price sm-hide'>product</h5>
                <h5 className='quantity'>product</h5>
                <h5 className='total'>product</h5>
            </div>
            <div className='products'>
                {productsInCart}
            </div>
            <div className='basketTotalContainer'>
                <h4 className='basketTotalTitle'>basket total</h4>
                <h4 className='basketTotal'>{basketProps.cartCost}</h4>
            </div>
        </div>
    )
}

const mapStateToProps = state => ({
    basketProps: state.basketState
})

export default connect(mapStateToProps)(Cart)

Comments

[Дмитрий]

Чтобы было верное отображение, нужно код в вопросах заключать в тэги с помощью исходный код - javascript

[Rebuslol]

Дмитрий, до этого задавал,там все само выровнялось просто)

[Дмитрий]

Rebuslol, Поправьте пожалуйста вопрос

[Дмитрий]

Rebuslol, Не видно
а) где из какого компонента идет добавление в корзину
б) где в вашем state свойство basketState

[Rebuslol]

Дмитрий, если честно я просто учусь) что именно нужно скинуть? экшены?

[Дмитрий]

Rebuslol, Из вашего вопроса я понял, что вы добавляете товар в корзину но вместо 1 штуки в корзине оказывается 2 штуки, верно? Так логично вывести код, который вызывает добавление. И то что вы учитесь, никак не отменяет того факта что вы показываете код, читающий свойство basketState из стейта, но в самом стейте такого свойства нет.

[Дмитрий]

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

[Rebuslol]

Дмитрий,

import { combineReducers } from 'redux'
import basketReducer from './basketReducer'

export default combineReducers({
    basketState: basketReducer
})

[Rebuslol]

Дмитрий, упоминание о ем идет речь,есть только в этом файле,если я правильно понял о чем речь