<!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;
    }
  }
};