|
|
@@ -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();
|
