Advertisement
Sora952

Redux JS natif wild quest

Jun 6th, 2020
79
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <meta charset="utf-8" />
  5.    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.    <title>Counter Redux</title>
  7.    <meta name="viewport" content="width=device-width, initial-scale=1">
  8.  
  9.    <!-- Redux CDN -->
  10.    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script>
  11. </head>
  12. <body>
  13.    <!-- Render the store -->
  14.    <p id="render-store"></p>
  15.    <button id="add">+</button>
  16.    <button id="add10">+10</button>
  17.    <button id="remove">-</button>
  18.    <button id="remove10">-10</button>
  19.    <button id="reset">reset</button>
  20.  
  21.    <script src="main.js"></script>
  22. </body>
  23. </html>
  24.  
  25.  
  26. // ACTIONS
  27. const resetAction = {
  28.  
  29.     type: 'RESET',
  30. };
  31.  
  32. const addAction = {
  33.    type: 'ADD',
  34. };
  35.  
  36. const addAction10 = {
  37.  
  38.     type: 'ADD10',
  39. };
  40.  
  41. const removeAction = {
  42.    type: 'REMOVE',
  43. };
  44.  
  45. const removeAction10 = {
  46.  
  47.     type: 'REMOVE10',
  48.  
  49. };
  50.  
  51. // REDUCER
  52. const counterReducer = (state = 0, action) => {
  53.    switch (action.type) {
  54.        case 'ADD':
  55.            return state + 1;
  56.        case 'ADD10':
  57.            return state + 10;
  58.        case 'REMOVE':
  59.            return state - 1;
  60.        case 'REMOVE10':
  61.            return state - 10;
  62.        case 'RESET':
  63.            return state = 0;
  64.        default:
  65.            return state;
  66.    }
  67. }
  68.  
  69. // STORE
  70. const { createStore } = Redux;
  71. const store = createStore(counterReducer);
  72.  
  73. // MAIN
  74. const renderStore = document.getElementById('render-store');
  75. const render = () => {
  76.    renderStore.innerHTML = store.getState();
  77. }
  78.  
  79. store.subscribe(render);
  80. render();
  81.  
  82. const add10 = document.getElementById('add10');
  83. add10.addEventListener('click', () => {
  84.    store.dispatch(addAction10)
  85. });
  86.  
  87. const add = document.getElementById('add');
  88. add.addEventListener('click', () => {
  89.    store.dispatch(addAction)
  90. });
  91.  
  92. const remove10 = document.getElementById('remove10');
  93. remove10.addEventListener('click', () => {
  94.    store.dispatch(removeAction10)
  95. });
  96.  
  97. const remove = document.getElementById('remove');
  98. remove.addEventListener('click', () => {
  99.    store.dispatch(removeAction)
  100. });
  101.  
  102. const reset = document.getElementById('reset');
  103. reset.addEventListener('click', () => {
  104.    store.dispatch(resetAction)
  105. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement