<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
</head>
<body>
<h2><a target="_blank" href="https://github.com/magnumjs/domchanger-redux-connect">DomChanger</a> Redux Connect</h2>
<p>DomChanger bindings for Redux. Performant and flexible.</p>
<script src="//cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.min.js"></script>
<script src="//rawgit.com/creationix/domchanger/master/domchanger.js"></script>
<script src="//rawgit.com/magnumjs/domchanger-redux-connect/master/redux-create-reducer.js"></script>
<script src="//rawgit.com/magnumjs/domchanger-redux-connect/master/redux-middleware.js"></script>
<script src="//rawgit.com/magnumjs/domchanger-redux-connect/master/redux-connect.js"></script>
<script src="counter-service.js"></script>
<script src="redux-app.js"></script>
<script src="app.js"></script>
</body>
</html>
function IncrementButtons() {
return {
render: function(props) {
return [
["button", {
onclick: function() {
props.increment();
}
}, 'Increment'],
["button", {
onclick: function() {
props.decrement('stuff');
}
}, 'Decrement'],
[CurrentCount, props],
];
}
}
}
function CurrentCount() {
return {
render: function(props) {
return ['div', 'Current count is ' + props.count + '!']
}
}
}
var buttons = Redux.connect(domChanger(IncrementButtons, document.body))
(reduxApp).update(true);
Redux.connect(domChanger(CurrentCount, document.body))({
link: buttons
}).update(true);
var reduxApp = (function(Redux, counterService) {
//Defaults:
var initState = {
count: 0
};
//Action types:
var types = {
'INCREMENT': 'INCREMENT',
'DECREMENT': 'DECREMENT'
};
//Independent Service:
var serviceCounter = counterService();
//Create Reducer:
var counter = Redux.createReducer(initState);
//Add action type handlers to reducer:
counter.addHandler(types.INCREMENT, function(newState, data) {
newState.count = serviceCounter.increment(newState.count);
return newState;
});
counter.addHandler(types.DECREMENT, function(newState, data) {
newState.count = serviceCounter.decrement(newState.count);
return newState;
});
//Return values for Redux.connect:
return {
reducers: counter,
actionTypes: types,
middleware: [Redux.middle.thunkMiddleware, Redux.middle.logger]
};
}(Redux, counterService));
var counterService = function() {
return {
increment: function(num) {
return ++num;
},
decrement: function(num) {
return --num;
}
}
};