homework/js 17/index.js

// 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,
    };
  }
}