homework/hw-js-11-redux-cart/js/cart.js

// +сделать отображение всего того, что есть в ларьке (можете хоть витрину нарисовать, если интересно) с количествами;
//+ сделать select для выбора товара и input type = 'number' для выбора количества и кнопку "купить",
// которая посылает action в store используя actionCreator для создания action
// +добавить в reducer проверку на уход в минус, что бы нельзя было продать то, чего нет в должном количестве.
// +добавить в state цену каждого товара и поле касса.Для этого вместо структуры вида пиво: 100 используйте
// пиво: КАКОЙ - ТО ОБЪЕКТ С КОЛИЧЕСТВОМ И СТОИМОСТЬЮ ОДНОЙ ЕДИНИЦЫ.
// +В action добавьте поле "бабло".Всё это пишется в reducer, не забудьте проверки что бабла хватает.
// +добавьте в интерфейс поле для денег.




function reducer(state, { type, ШО, СКОКА, бабло }) { //объект action деструктуризируется на три переменных
    if (!state) { //начальная уборка в ларьке:
        return {
            пиво: { amount: 100, price: 20 },
            чипсы: { amount: 100, price: 15 },
            сиги: { amount: 100, price: 45 },
            касса:0
        }
    }
    if (type === 'КУПИТЬ') {
                 //если тип action - КУПИТЬ, то:
        if ((typeof state[ШО] !== "undefined") && ((СКОКА <= state[ШО]['amount']) && СКОКА > 0) && (бабло >= state[ШО]['price'] * СКОКА)) {
 
            return {
                ...state, //берем все что было из ассортимента
                [ШО]: { 'amount': state[ШО]['amount'] - СКОКА, 'price': state[ШО]['price'] },
                'касса': state['касса']+state[ШО]['price']*СКОКА
                //и уменьшаем то, что покупается на количество
            }
                  
        }
        return state //если мы не поняли, что от нас просят в `action` - оставляем все как есть
    }
}
function createStore(reducer){
    let state       = reducer(undefined, {}) //стартовая инициализация состояния, запуск редьюсера со state === undefined
    let cbs         = []                     //массив подписчиков
    
    const getState  = () => state            //функция, возвращающая переменную из замыкания
    const subscribe = cb => (cbs.push(cb),   //запоминаем подписчиков в массиве
                             () => cbs = cbs.filter(c => c !== cb)) //возвращаем функцию unsubscribe, которая удаляет подписчика из списка
                             
    const dispatch  = action => { 
        const newState = reducer(state, action) //пробуем запустить редьюсер
        if (newState !== state){ //проверяем, смог ли редьюсер обработать action
            state = newState //если смог, то обновляем state 
            for (let cb of cbs)  cb() //и запускаем подписчиков
        }
    }
    
    return {
        getState, //добавление функции getState в результирующий объект
        dispatch,
        subscribe //добавление subscribe в объект
    }
}

const store = createStore(reducer);
store.subscribe(() => console.log(store.getState()));
store.subscribe(drawTable);
for ( const item of Object.keys(store.getState())) { laryok.insertAdjacentHTML('beforeend', `<option >${item}</option>`)}

buyButton.onclick = () => {
    store.dispatch({ type: "КУПИТЬ", ШО: laryok.value, СКОКА: amount.value, бабло:bablo.value });
    
}

function drawTable() {
    goodsTable.innerHTML = "";
     goodsTable.insertAdjacentHTML('beforeend', '<caption><b>Данные о товарах</b></caption><tr><th>Товар</th><th>Кол-во на складе</th><th>Цена</th></tr>');
   
    for (const item of Object.entries(store.getState())) {
        if (item[0] !== 'касса') {
            const good = document.createElement('tr');
            good.innerHTML = `<td>${item[0]}</td><td>${item[1]['amount']}</td><td>${item[1]['price']}</td>`
            goodsTable.appendChild(good);
        }
        }
}
drawTable();