// redux Домашнее задание. // задание 1 общие правила, задачи // настройка товаров, кассы и покупку товаров с помощью Redux import { createStore } from 'redux'; const BUY = 'BUY'; const initialState = { beer: { name: 'Пиво', quantity: 100, price: 50, }, soda: { name: 'Газировка', quantity: 50, price: 30, }, juice: { name: 'Сок', quantity: 20, price: 70, }, cash: 0, }; function buyActionCreator(product, quantity) { return { type: BUY, product, quantity, }; } function reducer(state = initialState, action) { switch (action.type) { case BUY: const product = state[action.product]; if (product.quantity < action.quantity) { return state; } return { ...state, [action.product]: { ...product, quantity: product.quantity - action.quantity, }, cash: state.cash + product.price * action.quantity, }; // Другие случаи... } } const store = createStore(reducer); const productSelect = document.getElementById('product-select'); const quantityInput = document.getElementById('quantity-input'); const buyButton = document.getElementById('buy-button'); store.subscribe(() => { console.log(store.getState()); }); buyButton.addEventListener('click', () => { const product = productSelect.value; const quantity = quantityInput.value; store.dispatch(buyActionCreator(product, quantity)); }); { // Чтобы связать эти элементы с Redux-стором const productSelect = document.getElementById('product-select'); const quantityInput = document.getElementById('quantity-input'); const buyButton = document.getElementById('buy-button'); buyButton.addEventListener('click', () => { const product = productSelect.value; const quantity = quantityInput.value; store.dispatch(buyActionCreator(product, quantity)); }); } { // проверку на уход в минус в редуктор function reducer(state = initialState, action) { switch (action.type) { case BUY: const product = state[action.product]; if (product.quantity < action.quantity) { return state; } return { ...state, [action.product]: { ...product, quantity: product.quantity - action.quantity, }, cash: state.cash + product.price * action.quantity, }; // Другие случаи... } } } { // добавить в state цену каждого товара и поля кассы const initialState = { products: { beer: { quantity: 100, price: 10, }, soda: { quantity: 50, price: 5, }, juice: { quantity: 30, price: 15, }, }, cash: 0, }; function reducer(state = initialState, action) { switch (action.type) { case BUY: const product = state.products[action.product]; if (product.quantity < action.quantity) { return state; } return { ...state, products: { ...state.products, [action.product]: { ...product, quantity: product.quantity - action.quantity, }, }, cash: state.cash + product.price * action.quantity, }; } } } { // отобразить состояние на экране const cashElement = document.getElementById('cash'); store.subscribe(() => { const state = store.getState(); cashElement.innerHTML = state.cash; }); } { // обработать событие отправки формы const form = document.getElementById('buy-form'); form.addEventListener('submit', (event) => { event.preventDefault(); const product = document.getElementById('product').value; const quantity = parseInt(document.getElementById('quantity').value, 10); store.dispatch(buyActionCreator(product, quantity)); }); } { function buyActionCreator(product, quantity) { return { type: BUY, product, quantity, }; } }