Homework10_Redux/index.js

let sigi = document.getElementById("Sigi")
let chips = document.getElementById("Chips")
let beer = document.getElementById("Beer")
let button = document.getElementById("button")
let input =  document.getElementById("input")
let select = document.getElementById("Select")
let bablo = document.getElementById("Kasa")
let sdacha = document.getElementById("sdacha")
let kasa = document.getElementById("Kassa")


function reducer(state, {type, ШО, СКОКА, БАБЛО}){ //объект action деструктуризируется на три переменных
    if (!state){ //начальная уборка в ларьке:
        return {
            пиво: {
                Сколько: 100,
                Цена: 30,
            },
            чипсы: {
                Сколько: 100,
                Цена: 20,
            },
            сиги: {
                Сколько: 100,
                Цена: 75,
            },
            Касса: 0,
            Сдача : 0,
            
        }
    }
    if (type === 'КУПИТЬ') {         //если тип action - КУПИТЬ, то:
        if (СКОКА <= state[ШО].Сколько && БАБЛО - (СКОКА * state[ШО].Цена) >= 0 )    
            return {
                ...state, //берем все что было из ассортимента
                [ШО]: {
                    Сколько: state[ШО].Сколько - СКОКА,
                    Цена: state[ШО].Цена                       //и уменьшаем то, что покупается на количество
                },
                Касса: state.Касса + (СКОКА * state[ШО].Цена),
                Сдача: БАБЛО - (СКОКА * 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 шоЛежит = () => {
     let objectStore = store.getState()
     sigi.innerText = `Сиги :  ${objectStore.сиги ['Сколько']} цена : ${objectStore.сиги['Цена']}`
     chips.innerText = `Чипсы :  ${objectStore.чипсы['Сколько']} цена : ${objectStore.чипсы['Цена']}`
     beer.innerText = `Пиво :  ${objectStore.пиво['Сколько']} цена : ${objectStore.пиво['Цена']}`
     sdacha.innerText = `Ваша сдача : ${objectStore['Сдача']}`
     kasa.innerText = `Касса : ${objectStore['Касса']}`
     bablo.value = `${objectStore['Сдача']}`


 }

let купиШОнибудь = () => ({ type: 'КУПИТЬ', ШО: select.value, СКОКА: input.value, БАБЛО: bablo.value})

button.onclick = () => {
    store.dispatch(купиШОнибудь())
    шоЛежит()
}

window.onload = () => {
    шоЛежит()
}