Created
June 25, 2019 11:41
-
-
Save santiagocodes/8d6e5d5c1cd573d3e82d0eb35c1da046 to your computer and use it in GitHub Desktop.
A counter using Redux and Vanilla Javascript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Counter Redux</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- Redux CDN --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script> | |
| </head> | |
| <body> | |
| <!-- Render the store --> | |
| <p id="render-store"></p> | |
| <button id="remove10">-10</button> | |
| <button id="remove1">-1</button> | |
| <button id="reset">reset</button> | |
| <button id="add1">+1</button> | |
| <button id="add10">+10</button> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ACTIONS | |
| const addAction = { | |
| type: 'ADD', | |
| ammount: 1 | |
| }; | |
| const removeAction = { | |
| type: 'REMOVE', | |
| ammount: 1 | |
| }; | |
| // REDUCER | |
| const counterReducer = (state = 0, action) => { | |
| switch (action.type) { | |
| case 'ADD': | |
| console.log(state, action) | |
| return state + action.ammount; | |
| case 'REMOVE': | |
| return state - action.ammount; | |
| case 'RESET': | |
| return 0 | |
| default: | |
| return state; | |
| } | |
| } | |
| // STORE | |
| const { createStore } = Redux; | |
| const store = createStore(counterReducer); | |
| // MAIN | |
| const renderStore = document.getElementById('render-store'); | |
| const render = () => { | |
| renderStore.innerHTML = store.getState(); | |
| } | |
| store.subscribe(render); | |
| render(); | |
| // Button Add 1 | |
| const add1 = document.getElementById('add1'); | |
| add1.addEventListener('click', () => { | |
| store.dispatch({ | |
| type: "ADD", | |
| ammount: 1 | |
| }) | |
| }); | |
| // Button Add 10 | |
| const add10 = document.getElementById('add10'); | |
| add10.addEventListener('click', () => { | |
| store.dispatch({ | |
| type: "ADD", | |
| ammount: 10 | |
| }) | |
| }); | |
| // Button Subtract 1 | |
| const remove1 = document.getElementById('remove1'); | |
| remove1.addEventListener('click', () => { | |
| store.dispatch({ | |
| type: "REMOVE", | |
| ammount: 1 | |
| }) | |
| }); | |
| // Button Subtract 10 | |
| const remove10 = document.getElementById('remove10'); | |
| remove10.addEventListener('click', () => { | |
| store.dispatch({ | |
| type: "REMOVE", | |
| ammount: 10 | |
| }) | |
| }); | |
| // Button Reset Back to 0 | |
| const reset = document.getElementById('reset'); | |
| reset.addEventListener('click', () => { | |
| store.dispatch({ | |
| type: "RESET", | |
| ammount: 0 | |
| }) | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment