issam83
12/3/2018 - 10:42 AM

compteur redux html

compteur redux html
content_copyfile_download
<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">+1</button>
    <button id="remove">-1</button>
    <button id="add10">+ 10</button>
    <button id="remove10">- 10</button>
    <button id="reset">reset</button>
 
    <script src="main.js"></script>
 </body>
 </html>
compteur redux main
content_copyfile_download
const addAction = {
    type: 'ADD',
 };
 
 const removeAction = {
    type: 'REMOVE',
 };

 const addAction10 = {
    type: 'ADD10',
 };
 
 const removeAction10 = {
    type: 'REMOVE10',
 };

 const resetAction = {
    type: 'RESET',
 };

 const counterReducer = (state = 0, action) => {
    switch (action.type) {
        case 'ADD':
            return state + 1;
        case 'REMOVE':
            return state - 1;
        case 'ADD10':
            return state + 10;
        case 'REMOVE10':
            return state - 10;
        case 'RESET' :
            return state = 0;   
        default:
            return state;
    }
 }

 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 remove10 = document.getElementById('remove10');
remove10.addEventListener('click', () => {
   store.dispatch(removeAction10)
});

const add = document.getElementById('add');
add.addEventListener('click', () => {
   store.dispatch(addAction)
});