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${key}`; table.appendChild(rows); if(typeof getStateObj[key]=='object'){ /* for(let keyinObj in getStateObj[key]){ // цикл для перебора внутринних полей вложенного обьекта но работатет кривовастенько*/ let rows = document.createElement('tr'); rows.innerHTML = ` count ${getStateObj[key].count} price ${getStateObj[key].price} ` 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= `${getStateObj[key]}` 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);