Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <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="add">+</button>
- <button id="add10">+10</button>
- <button id="remove">-</button>
- <button id="remove10">-10</button>
- <button id="reset">reset</button>
- <script src="main.js"></script>
- </body>
- </html>
- // ACTIONS
- const resetAction = {
- type: 'RESET',
- };
- const addAction = {
- type: 'ADD',
- };
- const addAction10 = {
- type: 'ADD10',
- };
- const removeAction = {
- type: 'REMOVE',
- };
- const removeAction10 = {
- type: 'REMOVE10',
- };
- // REDUCER
- const counterReducer = (state = 0, action) => {
- switch (action.type) {
- case 'ADD':
- return state + 1;
- case 'ADD10':
- return state + 10;
- case 'REMOVE':
- return state - 1;
- case 'REMOVE10':
- return state - 10;
- case 'RESET':
- return state = 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();
- const add10 = document.getElementById('add10');
- add10.addEventListener('click', () => {
- store.dispatch(addAction10)
- });
- const add = document.getElementById('add');
- add.addEventListener('click', () => {
- store.dispatch(addAction)
- });
- const remove10 = document.getElementById('remove10');
- remove10.addEventListener('click', () => {
- store.dispatch(removeAction10)
- });
- const remove = document.getElementById('remove');
- remove.addEventListener('click', () => {
- store.dispatch(removeAction)
- });
- const reset = document.getElementById('reset');
- reset.addEventListener('click', () => {
- store.dispatch(resetAction)
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement