Playing around with Redux this morning and didn’t like the fact that you have to use npm and whatnot to compile modules to run the simple example? Seemed overly complicated, so here’s a little demo with no compilation or development server required:
This file contains 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src='https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js'></script> | |
| </head> | |
| <body> | |
| <h1>Redux Quickstart<h1> | |
| <h2>Count: <span id="counter">0</span></h2> | |
| <button onclick="increment();">+</button> | |
| <button onclick="decrement();">-</button> | |
| <p>https://redux.js.org/introduction/getting-started</p> | |
| <script> | |
| function changeState(state = 0, action) { | |
| switch(action.type) { | |
| case 'INCREMENT': | |
| return state + 1; | |
| case 'DECREMENT': | |
| return state - 1; | |
| default: | |
| return state; | |
| } | |
| } | |
| let store = Redux.createStore(changeState); | |
| store.subscribe( () => { | |
| document.getElementById('counter').innerHTML = store.getState(); | |
| }); | |
| function increment() { | |
| store.dispatch({ type: 'INCREMENT' }); | |
| } | |
| function decrement() { | |
| store.dispatch({ type: 'DECREMENT' }); | |
| } | |
| </script> | |
| </body> | |
| </html> |