js_homeworks/redux/main.js

function reducer(state, {type, ШО, СКОКА,БАБОС}){ //объект action деструктуризируется на три переменных
    if (!state){ //начальная уборка в ларьке:
        return {
            пиво: {count: 100, price: 25},
            чипсы: {count: 100, price: 30},
            сиги: {count: 100, price: 32},
            сникерс: {count: 100, price: 40},
            касса: 0
        }
    }
    if (type === 'КУПИТЬ'){ //если тип action - КУПИТЬ, то:
        if(СКОКА > state[ШО].count){
            alert(`nety stoka ${state[ШО]}`);
            return state;
        }
        if(БАБОС < (state[ШО].price * СКОКА)){
           console.log('gde babki?')
            return state
        } 

        return {
            ...state, //берем все что было из ассортимента
            [ШО]: {count:state[ШО].count - СКОКА, price:state[ШО].price},
            касса: state.касса + (+БАБОС),
          //и уменьшаем то, что покупается на количество
        }
    }
    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);

let productArr = Object.keys(store.getState())
let select = document.getElementById('select');
let numberOfProducts = document.getElementById('numberOfProducts');
let money = document.getElementById('money');
let buyButtton = document.getElementById('buy'); 
for(let i = 0; i<productArr.length; i++){
    select.options[i] = new Option(productArr[i],productArr[i]); 
}
function createTable(){
        let getStateObj = store.getState();
        let table = document.getElementById('table');
        table.innerHTML ='';
        /* for(let[key,value] of Object.entries(store.getState())){
            let rows = document.createElement('tr');
            table.append(rows)
            rows.append(document.createElement('td').innerText = key);
            rows.append(document.createElement('td').innerText = value);
        } */
        for(let key in getStateObj){
            let rows = document.createElement('tr');
            rows.innerHTML = `<td colspan="2">${key}</td>`;
            table.appendChild(rows);
            if(typeof getStateObj[key]=='object'){
                /* for(let keyinObj in getStateObj[key]){ // цикл для перебора внутринних полей вложенного  обьекта но работатет кривовастенько*/
                     let rows = document.createElement('tr');
                    rows.innerHTML = `
                        <td> count ${getStateObj[key].count}  price ${getStateObj[key].price}</td>
                    `
                    table.appendChild(rows);
                    /* table.append(rows);
                    rows.append(document.createElement('td').innerText = `name of product ${key}`);
                    if(keyinObj == 'count'){
                    rows.append(document.createElement('td').innerText = ` amount of products${getStateObj[key][keyinObj]}`);
                    }
                    if(keyinObj == 'price'){
                        rows.append(document.createElement('td').innerText = ` price${getStateObj[key][keyinObj]}`); 
                    }
                     */
                   /*  rows.append(document.createElement('td').innerText = `price ${getStateObj[key][1][keyinObj]}`); */
                    
                /* } */ 
            } else{
                rows = document.createElement('tr');
                rows.innerHTML= `<td>${getStateObj[key]}</td>`
                table.append(rows);
                /* rows.append(document.createElement('td').innerText = key);
                rows.append(document.createElement('td').innerText = ` ${getStateObj[key]}`); */
            }
        }
    } 
buyButtton.addEventListener("click",function buyProducts() {
            store.dispatch({type: 'КУПИТЬ', ШО:select.value,СКОКА:numberOfProducts.value,БАБОС:money.value})
})


store.subscribe(() => console.log(store.getState()));
createTable(store.getState());
store.subscribe(createTable);