123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- // общие правила
- // * влияние на store (изменение state) происходит через store.dispatch(какой-то экшон криейтор(какие-то параметры))
- // * отображение состояния state на экране происходит через store.subscribe(какая-то ваша функция, которая делает
- // store.getState() и меняет DOM)
- // Менять код createStore не надо
- // Задачи
- // * сделать отображение всего того, что есть в ларьке (можете хоть витрину нарисовать, если интересно) с количествами;
- // * сделать select для выбора товара и input type='number' для выбора количества и кнопку "купить", которая посылает action
- // в store используя actionCreator для создания action
- // * добавить в reducer проверку на уход в минус, что бы нельзя было продать то, чего нет в должном количестве.
- // * добавить в state цену каждого товара и поле касса. Для этого вместо структуры вида beer: 100 используйте beer:
- // КАКОЙ-ТО ОБЪЕКТ С КОЛИЧЕСТВОМ И СТОИМОСТЬЮ ОДНОЙ ЕДИНИЦЫ. В action добавьте поле "бабло".
- // Всё это пишется в reducer, не забудьте проверки что бабла хватает.
- // * добавьте в интерфейс поле для денег.
- function reducer(state, { type, obj, amount }) {
- if (!state) {
- return {
- beer: { number: 100, price: 5 },
- chips: { number: 50, price: 3 },
- smoke: { number: 50, price: 7 },
- cash: { cashbox: 0, mycash: 100 }
- }
- }
- if (type === 'BUY') {
- if ((state[obj].number) >= 0 && state.cash.mycash - state[obj].price * amount >= 0) {
- if ((amount >= 0)) {
- return {
- ...state,
- [obj]: { ...state[obj], number: state[obj].number - amount },
- cash: {
- mycash: state.cash.mycash - state[obj].price * amount,
- cashbox: state.cash.cashbox + state[obj].price * amount
- }
- }
- }
- if (amount < 0){
- return{
- ...state, cashbox: state.cashbox * 0
- }
- }
- }
- }
- 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
- }
- }
- const store = createStore(reducer)
- console.log(store.getState())
- let productN = document.getElementById("product");
- let numberN = document.getElementById("number");
- let buttonN = document.getElementById("button");
- let pivoN = document.getElementById("pivo").innerHTML = store.getState().beer.number
- let chipsN = document.getElementById("chips").innerHTML = store.getState().chips.number
- let sigiN = document.getElementById("sigi").innerHTML = store.getState().smoke.number
- let pivoM = document.getElementById("pivoK").innerHTML = store.getState().beer.price + '$'
- let chipsM = document.getElementById("chipsK").innerHTML = store.getState().chips.price + '$'
- let sigiM = document.getElementById("sigiK").innerHTML = store.getState().smoke.price + '$'
- let kassaN = document.getElementById("kassa").innerHTML = store.getState().cash.cashbox + '$'
- let moneyN = document.getElementById("money").innerHTML = store.getState().cash.mycash + '$'
- buttonN.onclick = () => {
- store.dispatch({ type: 'BUY', obj: productN.value, amount: numberN.value })
- let pivoN = document.getElementById("pivo").innerHTML = store.getState().beer.number
- let chipsN = document.getElementById("chips").innerHTML = store.getState().chips.number
- let sigiN = document.getElementById("sigi").innerHTML = store.getState().smoke.number
- let kassaN = document.getElementById("kassa").innerHTML = store.getState().cash.cashbox + '$'
- let moneyN = document.getElementById("money").innerHTML = store.getState().cash.mycash + '$'
- }
|