[Redux] Increment App

In this example below you will see how to do a [Redux] Increment App with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by renanpallin, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright renanpallin ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>[Redux] Increment App</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>

  
  
</head>

<body>

  <button id="btn-minus" class="btn btn-primary"> - </button>
<span id="display"></span>
<button id="btn-plus" class="btn btn-primary"> + </button>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0-beta.2/redux.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/renanpallin/redux-increment-app-zWENrX */
// action types and action creators
const INCREMENT = 'INCREMENT';
const increment = () => ({
  type: INCREMENT
});

const DECREMENT = 'DECREMENT';
const decrement = () => ({
  type: DECREMENT
});

const reducer = (state = 0, action) => {
  switch(action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
    default:
      return state;
  }
}

const store = Redux.createStore(reducer);

// Manipulação de view
const display = document.getElementById('display');
const render = () => {
  display.innerText = store.getState();
}

store.subscribe(render);
render();

document
  .getElementById('btn-minus')
  .addEventListener('click', e => {
    store.dispatch(decrement());
  });

document
  .getElementById('btn-plus')
  .addEventListener('click', e => {
    store.dispatch(increment());
  });

Comments