Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://npmcdn.com/redux/dist/redux.js"></script>
</head>
<body>
    <p>Counter is now at <span id="num"></span>.</p>
    <p>
        <button id="incbtn">Increase</button>
        <span> by </span>
        <input type="number" id="amount" value=1 />
    </p>
</body>
</html>
 
var initialstate = 0;
var reducer = function(state,action){
    switch(action.type){
        case 'INCREMENT': return state + action.by;         
        default: return state;
    }
};
var store = Redux.createStore(reducer,initialstate);
var actionCreators = {
    increment: function(int){
        return {type: 'INCREMENT', by: int};
    }
};
var updateUI = function(state,arg2){
    console.log("Render",state,arg2,store.getState());
    var element = document.getElementById("num");
    element.innerHTML = state;
};
var button = document.getElementById("incbtn");
button.addEventListener("click",function(){
    var input = document.getElementById("amount"),
        increase = parseInt(input.value),
        action = actionCreators.increment(increase);
    store.dispatch(action);
});
store.subscribe(function(){
  updateUI(store.getState());
});
updateUI(store.getState());
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
krawallerpro
0viewers