diogoca/cart-vanilla.html

## cart-vanilla.html
<!DOCTYPE html>
<html>
  <head>
    <title>Redux basic example</title>
    <script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
  </head>
  <body>
  	<h2>Itens</h2>
  	<button class="item">Apple</button>
  	<button class="item">Banana</button>

  	<div id="cart"></div>

  	<script>
  		// Reducer
  		function cart(state, action) {
  			if (typeof state === 'undefined') {
  				return [];
  			}

  			switch (action.type) {
  				case 'ADD':
  					state.push(action.payload);
  					return state;
  				case 'REMOVE':
  					state.splice(action.payload, 1);
  					return state;
  			}
  		}

  		// Store
  		var store = Redux.createStore(cart);

  		// Render
  		var cartEl = document.getElementById('cart');

  		function render() {
  			const itens = store.getState();
  			const total = itens.length;

  			var html = '<h2>Cart ' + total + ' itens</h2>';
  			html +=  itens.map((item, index) => {
  				return(
  					item + '<button onclick="removeFromCart(' + index + ')">Remove</button><br />'
  				);
  			}).join('');

  			cartEl.innerHTML = html;
  		}

  		render();

  		// Subscribe
  		store.subscribe(render);

  		// Actions
  		var bodyEl = document.body;
  		var itensEl = document.getElementsByClassName('item');
  		var itensArray = Array.from(itensEl);

  		itensArray.map((item) => {
  			item.addEventListener('click', () => {
  				store.dispatch({
  					type: 'ADD',
  					payload: item.textContent
  				});
  			});
  		});

  		function removeFromCart(index) {
  			store.dispatch({
				type: 'REMOVE',
				payload: index
			});
  		}

  	</script>

  </body>
  </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Redux basic example</title>
	<script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
	</head>
	<body>
	<h2>Itens</h2>
	<button class="item">Apple</button>
	<button class="item">Banana</button>

	<div id="cart"></div>

	<script>
	// Reducer
	function cart(state, action) {
	if (typeof state === 'undefined') {
	return [];
	}

	switch (action.type) {
	case 'ADD':
	state.push(action.payload);
	return state;
	case 'REMOVE':
	state.splice(action.payload, 1);
	return state;
	}
	}

	// Store
	var store = Redux.createStore(cart);

	// Render
	var cartEl = document.getElementById('cart');

	function render() {
	const itens = store.getState();
	const total = itens.length;

	var html = '<h2>Cart ' + total + ' itens</h2>';
	html += itens.map((item, index) => {
	return(
	item + '<button onclick="removeFromCart(' + index + ')">Remove</button><br />'
	);
	}).join('');

	cartEl.innerHTML = html;
	}

	render();

	// Subscribe
	store.subscribe(render);

	// Actions
	var bodyEl = document.body;
	var itensEl = document.getElementsByClassName('item');
	var itensArray = Array.from(itensEl);

	itensArray.map((item) => {
	item.addEventListener('click', () => {
	store.dispatch({
	type: 'ADD',
	payload: item.textContent
	});
	});
	});

	function removeFromCart(index) {
	store.dispatch({
	type: 'REMOVE',
	payload: index
	});
	}

	</script>

	</body>
	</html>