Vladislav_Postnikov
/
HomeWork1


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Redux</title>
</head>
<body>

	<!-- <input type="text" id="tovar"> -->
	<select id='tovar'>
		<option value="пиво">пиво</option>
		<option value="чипсы">чипсы</option>
		<option value="сиги">сиги</option>
	</select>
	<input type="number" id="skok">
	<button id="btn">Купить</button>

	<script>
		function reducer(state, {type, ШО, СКОКА}){
    	if (!state){ 
       		return {
            	пиво: 100,
            	чипсы: 100,
            	сиги: 100
        	}
    	}
    	if (type === 'КУПИТЬ'){ 
        	return {
            	...state, 
            	[ШО]: state[ШО] - СКОКА 
        	}
    	}
    	return state;
		}


		function createStore(reducer){
    		let state       = reducer(undefined, {}) 
    		let cbs         = []                     
    
    		const getState  = () => state  
    		const subscribe = cb => (cbs.push(cb),  
                             () => cbs = cbs.filter(c => c !== cb)); 
    		const dispatch  = action => { 
        		const newState = reducer(state, action) 
        			if (newState !== state){ 
            			state = newState  
            			for (let cb of cbs)  cb() 
        			}
    		}
    
    		return {
        		getState, 	
        		dispatch,
        		subscribe 
    		}
		}
		
		let store=createStore(reducer);
		btn.onclick=function(){
			for(let [key] of Object.entries(store.getState())){
				if(tovar.value===key){
					store.dispatch({type: 'КУПИТЬ', ШО: tovar.value, СКОКА: skok.value});
					console.log(store.getState())
				}
			}
		}

		let table=document.createElement('table');
		for(let [key,value] of Object.entries(store.getState())){
			let tr=document.createElement('tr');
			let td=document.createElement('td');
			td.innerText=key+':'+value;
			tr.append(td);
			table.append(tr);
		}
		document.body.append(table);

		
		const unsubscribe=store.subscribe(()=>{
			while (table.hasChildNodes()) {
    			table.removeChild(table.firstChild);
			}
			for(let [key,value] of Object.entries(store.getState())){
			let tr=document.createElement('tr');
			let td=document.createElement('td');
			td.innerText=key+':'+value;
			tr.append(td);
			table.append(tr);
		}
		document.body.append(table);
		})

		/*zakup.onclick=function(){
			for(let [key] of Object.entries(store.getState())){
				if(tovar.value===key){
					store.dispatch({type: 'КУПИТЬ', ШО: tovar.value, СКОКА: skok.value});
					console.log(store.getState())
				}
			}
		}*/


		console.log(store.getState());
		

	</script>
</body>
</html>