homework/Homework-Redux/index.js

function reducer(state, {type, ШО, СКОКА }){ 
    if (!state){ 
        return {
            пиво: {storage : 100 , price: 65},
            чипсы: {storage: 145 , price: 120},
            сиги: {storage : 220 , price: 75.50},
            горілка: {storage : 140 , price: 200.50},
            корсары: {storage : 330 , price: 15.50},
            чупа_чупс: {storage : 220 , price: 14.50},
            вино_777: {storage : 220 , price: 14.50},
            касса: 0
        }
        
    }
     
    if(type === 'ВЫБОР'){
        if(СКОКА <= 0 || СКОКА > state[ШО].storage){
            return state;
        }return{
            ...state, 
            касса: +state.касса + (СКОКА * state[ШО].price),
        }
    }
    if (type === 'КУПИТЬ'){
            if(state[ШО].storage >= СКОКА){
                state[ШО].storage = state[ШО].storage - СКОКА
            }return {
                ...state 	 
            }
    } 
    if(type === 'ТРАНЗАКЦИЯ'){
        if(state.касса >= 0){
            return{
                ...state,
                касса : state.касса * 0,
            }
        }
    }
   
    return state 
}

const store = createStore(reducer)
console.log(store.getState())

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 в объект
    }
}
   
for(let [key, value] of Object.entries(store.getState())){
        let div = document.getElementById('content')
        let btn = document.createElement('button')
        var text = document.getElementById('text')
        let stock = document.getElementById('stock')
        let sklad = document.createElement('div')
            sklad.style.backgroundColor = 'silver'
            sklad.style.display = 'flex'
        let btn1 = document.createElement('div')
        let buy = document.getElementById('buy')
        stock.append(sklad)
        text.append(btn1)
        div.append(btn)
    btn.id = 'product'
    btn.innerHTML = `${key} (${value.price + "грн"})`


    btn.onclick = () => {
        store.dispatch({type: 'КУПИТЬ', ШО: key, СКОКА: 1})
        store.dispatch({type: 'ВЫБОР' , ШО : key , СКОКА: 1})
        console.log(store.getState())
    }
     

    buy.onclick = () => {
    let div = document.createElement('div')
    let content = document.getElementById('buy_content')
    var allMoney = `${store.getState().касса}`
    var result = Number(allMoney) 
    moneyStorage.push(result)
    arraySum(moneyStorage)
    console.log(moneyStorage)

    content.append(div)
       div.innerHTML = `Транзакция ${Date()}: ${store.getState().касса} грн`
       store.dispatch({type: 'ТРАНЗАКЦИЯ', ШО: 'касса', СКОКА: 0})
       store.dispatch({type: 'КАССА', ШО: 'касса', СКОКА: 0})
        console.log(store.getState())
    }
   store.subscribe(()=> sklad.innerHTML = '/' + ` ${key} ${value.storage} шт.` + ' ' );
    let moneyStorage = []
    function arraySum(array){
        var money = document.getElementById('total')

        var sum = 0;
        for(var i = 0; i < array.length; i++){
            sum += array[i];
            }
            money.innerText = sum + " грн";
        }
}

function casa(){
    const h1 = document.createElement('h1');
    h1.id = 'change'
    h1.style.color = 'red'
    text.append(h1);
    store.subscribe(() => h1.innerText = `До сплати: ${store.getState().касса} грн`);
    h1.innerText = `До сплати:${store.getState().касса}`;
}
casa();