Strona główna Odkrywaj Pomoc
Zaloguj się
Vladimir-Grabarev
/
A-level_homework
Obserwuj 1
Polub 0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

redux Homework done

Vladimir 3 lat temu
rodzic
2a443915dc
commit
d36491a676
2 zmienionych plików z 120 dodań i 0 usunięć
Zunifikowany widok Pokaż statystyki zmian
  1. 42 0
      HW 11/index.html
  2. 78 0
      HW 11/main.js

+ 42 - 0
HW 11/index.html
Wyświetl plik 

@@ -0,0 +1,42 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <div class="wrapper">
 
+        <table>
 
+            <tr>
 
+                <td>
 
+                    <label for="select">Что купить ?</label>
 
+                </td>
 
+                <td>
 
+                    <select id="select"></select>
 
+                </td>
 
+            </tr>
 
+            <tr>
 
+                <td>
 
+                    <label for="input">Сколько купить ?</label>
 
+                </td>
 
+                <td>
 
+                    <input type="number" id="input">
 
+                </td>
 
+            </tr>
 
+            <tr>
 
+                <td>
 
+                    <label for="input-money">Сколько ты готов дать деняк ?</label>
 
+                </td>
 
+                <td>
 
+                    <input type="number" id="input-money">
 
+                </td>
 
+            </tr>
 
+        </table>
 
+        <button class="button">Купить</button>
 
+        <table class="table"></table>
 
+    </div>
 
+    <script src="main.js"></script>
 
+</body>
 
+</html>

+ 78 - 0
HW 11/main.js
Wyświetl plik 

@@ -0,0 +1,78 @@
 
+let select = document.querySelector("#select");
 
+let button = document.querySelector(".button");
 
+let input = document.querySelector("#input");
 
+let inputMoney = document.querySelector("#input-money")
 
+let table = document.querySelector(".table");
 
+
 
+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 в объект
 
+    }
 
+};
 
+
 
+function reducer(state, {type, ШО, СКОКА, price}){ //объект action деструктуризируется на три переменных
 
+    if (!state){ //начальная уборка в ларьке:
 
+        return {
 
+            пиво: {count: 100, price: 25},
 
+            чипсы: {count: 100, price: 15},
 
+            сиги: {count: 100, price: 30}
 
+        }
 
+    }
 
+
 
+    if (type === 'КУПИТЬ' && state[ШО].count >= СКОКА && state[ШО].price <= price){ //если тип action - КУПИТЬ, то:
 
+        return {
 
+            ...state, //берем все что было из ассортимента
 
+            [ШО]: {count: state[ШО].count - СКОКА, price: state[ШО].price} //и уменьшаем то, что покупается на количество
 
+        }
 
+    }
 
+
 
+    return state //если мы не поняли, что от нас просят в `action` - оставляем все как есть
 
+}
 
+
 
+const store = createStore(reducer);
 
+store.subscribe(() => console.log(store.getState()));
 
+
 
+for(let [key, value] of Object.entries(store.getState())) {
 
+    let option = document.createElement("option");
 
+    
+    console.log(key);
 
+
 
+    option.innerText = key;
 
+
 
+    select.appendChild(option);
 
+}
 
+
 
+let createTable = function() {
 
+    let str = "<tr><td>Товар</td><td>Количество</td><td>Цена</td></tr>";
 
+
 
+    for(let [key, value] of Object.entries(store.getState())) {
 
+        str += `<tr><td>${key}</td><td>${value.count}</td><td>${value.price}</td></tr>`;
 
+    }
 
+
 
+    table.innerHTML = str;
 
+}
 
+
 
+store.subscribe(createTable);
 
+
 
+button.addEventListener("click", function() {
 
+    store.dispatch({type: "КУПИТЬ", ШО: select.value, СКОКА: input.value, price: inputMoney.value});
 
+});
 
+
 
+createTable();