|
|
@@ -0,0 +1,115 @@
|
|
|
+<!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>
|
