Redux Quickstart
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment