JulieGcql
10/31/2018 - 3:00 PM

index.html

index.html
content_copyfile_download
<!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">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script>
</head>

<body>
    <p id="render-store"></p>
    <button id="add1">add 1</button>
    <button id="remove1">remove 1</button>
    <button id="add10">add 10</button>
    <button id="remove10">remove 10</button>
    <button id="reset">reset</button>

    <script src="main.js"></script>
</body>

</html>
main.js
content_copyfile_download
// ACTIONS
const addAction1 = {
    type: 'add1',
};

const removeAction1 = {
    type: 'remove1',
};

const addAction10 = {
    type: 'add10',
};

const removeAction10 = {
    type: 'remove10',
};

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

const counterReducer = (state = 0, action) => {
    switch (action.type) {
        case 'add1':
            return state + 1;
        case 'remove1':
            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);


const renderStore = document.getElementById('render-store');
const render = () => {
    renderStore.innerHTML = store.getState();
}

store.subscribe(render);
render();

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

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

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

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


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