homework/js_10_redux/main.js

function reducer(state, {type, ШО, СКОКА, ДЕНЬГИ}){ //объект action деструктуризируется на три переменных
    if (!state){ //начальная уборка в ларьке:
        return {
            пиво: {
                count: 100,
                price: 30
            },
            чипсы:{
                count: 100,
                price: 25
            },
            сиги:{
                count: 100,
                price: 60
            },
            КАССА: 0,
            КОШЕЛЕК: 250
        };
    }
    if (type === 'КУПИТЬ'){ //если тип action - КУПИТЬ, то:
        if(state[ШО].count < СКОКА){
            alert('У нас нет такого количества!');
            return {
                ...state,
                [ШО]: {count: state[ШО].count, price: state[ШО].price},
            }
        };
        if(state.КОШЕЛЕК < (state[ШО].price * СКОКА)){
            alert('У Вас не хватает денег!');
            return {
                ...state,
                [ШО]: {count: state[ШО].count, price: state[ШО].price},
            }
        };
        if(СКОКА <= 0){
            alert('Вы уверены, что ввели верное количество?');
            return {
                ...state,
                [ШО]: {count: state[ШО].count, price: state[ШО].price},
            }
        }; 
        //else{
            //console.log(`${ШО} ${СКОКА} шт`);
        //}
        return {
            ...state, //берем все что было из ассортимента
            //[ШО]: state[ШО].count - СКОКА,//и уменьшаем то, что покупается на количество
            [ШО]: {count: state[ШО].count - СКОКА, price: state[ШО].price},
            КАССА: state.КАССА + 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);

function createGoods(select, store){
    for(let key in store.getState()){
        if(key === 'КАССА'){
            return;
        } else {
            let option = document.createElement('option');
            option.value = key;
            option.innerHTML = key;
            select.appendChild(option);
        }
    }
}

createGoods(sel, store);
store.subscribe(() => console.log(store.getState()));


btn.onclick = () => store.dispatch({type: 'КУПИТЬ', ШО: sel.value, СКОКА: +input.value});


function drawTable () {
    table.innerHTML = '<tr><th>Goods</th><th>Price</th><th>Total</th></tr>';

    for(let good in store.getState()){
        let tr = document.createElement('tr');
        table.appendChild(tr);
        tr.innerHTML = good;

        for(let pr = 0; pr < 1; pr++){
            let td = document.createElement('td');
            tr.appendChild(td);
            td.innerHTML = store.getState()[good].price + ' ' + 'грн';
            if(good === 'КАССА' || good === 'КОШЕЛЕК'){
                td.innerHTML ='';
            }
        }

        for(let c = 0; c < 1; c++){
            let td = document.createElement('td');
            tr.appendChild(td);
            td.innerHTML = store.getState()[good].count + ' ' + 'шт';
            if(good === 'КАССА' || good === 'КОШЕЛЕК'){
                td.innerHTML = store.getState()[good] + ' ' + 'грн';
            }
        }
    }
}

drawTable();
store.subscribe(() =>drawTable());