Skip to content

Instantly share code, notes, and snippets.

@angelique-w

angelique-w/index.html

Created December 5, 2019 14:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save angelique-w/f1f641866c9a6b6609609178583b1685 to your computer and use it in GitHub Desktop.
Save angelique-w/f1f641866c9a6b6609609178583b1685 to your computer and use it in GitHub Desktop.
Download ZIP
quête redux
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<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.4/redux.min.js"></script>
</head>
<body>
<p id="render-store"></p>
<button id="add1">+1</button>
<button id="remove1">-1</button>
<button id="add10">+10</button>
<button id="remove10">-10</button>
<button id="reset">Reset</button>
<script src="main.js"></script>
</body>
</html>
Raw
main.js
//ACTIONS
const add1Action = {
type: 'ADD1',
};
const remove1Action = {
type: 'REMOVE1',
};
const add10Action = {
type: 'ADD10'
}
const remove10Action = {
type: 'REMOVE10'
}
const resetAction = {
type: 'RESET'
}
//REDUCERS
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;
}
}
//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 add1 = document.getElementById('add1');
add1.addEventListener('click', () => {
store.dispatch(add1Action)
});
const remove1 = document.getElementById('remove1');
remove1.addEventListener('click', () => {
store.dispatch(remove1Action)
});
const add10 = document.getElementById('add10');
add10.addEventListener('click', () => {
store.dispatch(add10Action)
});
const remove10 = document.getElementById('remove10');
remove10.addEventListener('click', () => {
store.dispatch(remove10Action)
});
const reset = document.getElementById('reset');
reset.addEventListener('click', () => {
store.dispatch(resetAction)
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment