Skip to content

Instantly share code, notes, and snippets.

/index.html

Created September 20, 2016 06:17
Show Gist options
  • Save anonymous/9c38c6ec2f441f7d46ed62d656798fad to your computer and use it in GitHub Desktop.
Save anonymous/9c38c6ec2f441f7d46ed62d656798fad to your computer and use it in GitHub Desktop.
Download ZIP
Redux basic example // source http://jsbin.com/kegofu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Redux basic example</title>
<script src="https://npmcdn.com/redux@latest/dist/redux.min.js"></script>
</head>
<body>
<div>
<p>
Clicked: <span id="value">0</span> times
<button id="increment">+</button>
<button id="decrement">-</button>
<button id="incrementIfOdd">Increment if odd</button>
<button id="incrementAsync">Increment async</button>
</p>
</div>
<script id="jsbin-javascript">
// action
'use strict';
var INCRE = { type: 'INCREMENT' };
var DECRE = { type: 'DECREMENT' };
// action createor
function incre() {
return INCRE;
}
function decre() {
return DECRE;
}
// this is a reducer
function counter(state, action) {
if (typeof state === 'undefined') {
return 0;
}
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
// create store from reducer
var store = Redux.createStore(counter);
var valueEl = document.getElementById('value');
var target = document.body;
function render() {
valueEl.innerHTML = store.getState().toString();
}
var randomColor = function randomColor(opacity) {
return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
};
function changeColor() {
target.style.backgroundColor = randomColor(Math.abs(store.getState().toString()));
}
// init UI
render();
store.subscribe(render);
store.subscribe(changeColor);
// 实际它的 click 事件相当于触发一个 dispatch
document.getElementById('increment').addEventListener('click', function () {
store.dispatch(incre());
});
document.getElementById('decrement').addEventListener('click', function () {
store.dispatch(decre());
});
document.getElementById('incrementIfOdd').addEventListener('click', function () {
if (store.getState() % 2 !== 0) {
store.dispatch(incre());
}
});
document.getElementById('incrementAsync').addEventListener('click', function () {
setTimeout(function () {
store.dispatch(incre());
}, 5000);
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<title>Redux basic example</title>
<script src="https://npmcdn.com/redux@latest/dist/redux.min.js"><\/script>
</head>
<body>
<div>
<p>
Clicked: <span id="value">0</span> times
<button id="increment">+</button>
<button id="decrement">-</button>
<button id="incrementIfOdd">Increment if odd</button>
<button id="incrementAsync">Increment async</button>
</p>
</div>
</body>
</html>
</script>
<script id="jsbin-source-javascript" type="text/javascript">// action
const INCRE = { type: 'INCREMENT' }
const DECRE = { type: 'DECREMENT' }
// action createor
function incre() {
return INCRE
}
function decre() {
return DECRE
}
// this is a reducer
function counter(state, action) {
if (typeof state === 'undefined') {
return 0
}
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
// create store from reducer
var store = Redux.createStore(counter)
var valueEl = document.getElementById('value')
var target = document.body
function render() {
valueEl.innerHTML = store.getState().toString()
}
var randomColor = function (opacity) {
return 'rgba(' + Math.round(Math.random() * 255) + ','
+ Math.round(Math.random() * 255) + ','
+ Math.round(Math.random() * 255)
+ ',' + (opacity || '.3') + ')';
};
function changeColor(){
target.style.backgroundColor = randomColor(Math.abs(store.getState().toString()))
}
// init UI
render()
store.subscribe(render)
store.subscribe(changeColor)
// 实际它的 click 事件相当于触发一个 dispatch
document.getElementById('increment')
.addEventListener('click', function () {
store.dispatch(incre())
})
document.getElementById('decrement')
.addEventListener('click', function () {
store.dispatch(decre())
})
document.getElementById('incrementIfOdd')
.addEventListener('click', function () {
if (store.getState() % 2 !== 0) {
store.dispatch(incre())
}
})
document.getElementById('incrementAsync')
.addEventListener('click', function () {
setTimeout(function () {
store.dispatch(incre())
}, 5000)
})
</script></body>
</html>
Raw
jsbin.kegofu.js
// action
'use strict';
var INCRE = { type: 'INCREMENT' };
var DECRE = { type: 'DECREMENT' };
// action createor
function incre() {
return INCRE;
}
function decre() {
return DECRE;
}
// this is a reducer
function counter(state, action) {
if (typeof state === 'undefined') {
return 0;
}
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
// create store from reducer
var store = Redux.createStore(counter);
var valueEl = document.getElementById('value');
var target = document.body;
function render() {
valueEl.innerHTML = store.getState().toString();
}
var randomColor = function randomColor(opacity) {
return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
};
function changeColor() {
target.style.backgroundColor = randomColor(Math.abs(store.getState().toString()));
}
// init UI
render();
store.subscribe(render);
store.subscribe(changeColor);
// 实际它的 click 事件相当于触发一个 dispatch
document.getElementById('increment').addEventListener('click', function () {
store.dispatch(incre());
});
document.getElementById('decrement').addEventListener('click', function () {
store.dispatch(decre());
});
document.getElementById('incrementIfOdd').addEventListener('click', function () {
if (store.getState() % 2 !== 0) {
store.dispatch(incre());
}
});
document.getElementById('incrementAsync').addEventListener('click', function () {
setTimeout(function () {
store.dispatch(incre());
}, 5000);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment