Untitled

<!DOCTYPE html>
<html>

<head>
  <link href="//cdn.jsdelivr.net/picnicss/4.1.1/picnic.min.css" rel="stylesheet">
  <style>
    li:empty {
      list-style-type:none;
    }
  </style>
</head>

<body>

  <h1>Hello Mag.JS - Redux!</h1>
  <a target="_tab" href="https://github.com/magnumjs/mag.js">GitHub</a>
  <hr/>

  <div id="counter">
    <div>
      <button name="down">Decrease</button>
      <button name="up">Increase</button>
      <b></b>
    </div>
    <div>
      <input>
      <button name="add">Add</button>
      <ul>
        <li></li>
      </ul>
    </div>
  </div>

 <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.0.21.2.min.js"></script>
  <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.addons.0.21.min.js"></script>
  <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag-redux.0.21.min.js"></script>

  <script src="mag-redux.js"></script>
  <script src="mag-mod.js"></script>
  <script src="app-init.js"></script>
</body>

</html>

(function(namespace) {

  var props = {
    counter: {
      count: 0
    }
  }

  var Counter = {}

  Counter.controller = function() {
    this.input = ''
  }

  Counter.view = function(state, props) {

    state.b = props.counter.count
    state.li = props.todos || []

    state.up = {
      _onClick: props.increaseAction
    }

    state.down = {
      _onClick: props.decreaseAction
    }

    state.add = {
      _onClick: function() {
        props.addTodo(state.input)
        state.input = ''
      }
    }
  }


  namespace.Counter = mag.create('counter', Counter, props);

})(mag.namespace('mods.demo'));

var magRedux = (function() {

  //Types:
  var types = {
    ADD_TODO: 'ADD_TODO',
    DECREASE: 'DECREASE',
    INCREASE: 'INCREASE'
  }

  // Actions as objects:
  var actions1 = {
    decreaseAction: {
      type: types.DECREASE
    },
    increaseAction: {
      type: types.INCREASE
    },
    addTodo: {
      type: types.ADD_TODO,
      text: ''
    }
  }

  //Action as functions:
  var actions2 = {
    addTodo: function(text) {
      return {
        type: types.ADD_TODO,
        text: text
      };
    },
    decreaseAction: function() {
      return {
        type: types.DECREASE
      };
    },
    increaseAction: function() {
      return {
        type: types.INCREASE
      };
    }
  }


  // Reducer:
  function counter(state, action) {
    switch (action.type) {
      case types.INCREASE:
        return {
          count: state.count + 1
        };
      case types.DECREASE:
        return {
          count: state.count - 1
        };
      default:
        return state || {
          count: 0
        };
    }
  }


  // Reducer:
  function todos(state, action) {
    switch (action.type) {
      case types.ADD_TODO:
        console.log(action)
        return state.concat([action.text]);
      default:
        return state || [];
    }
  }




  //Optional: Map Redux state to component props
  var mapStateToProps = function(state) {
      return {
        todos: state.todos,
        value: state.counter.count
      };
    }
    //Remove mapping, use default
  mapStateToProps = {}


  // Map Redux actions to component props
  var mapDispatchToProps = function(dispatch) {
    return {
      increaseAction: function() {
        dispatch(actions2.increaseAction())
      },
      decreaseAction: function() {
        dispatch(actions2.decreaseAction())
      },
      addTodo: function(text) {
        dispatch(actions2.addTodo(text))
      }
    };
  }

  //Middleware:
  var logger = function logger(store) {
    return function(next) {
      return function(action) {
        console.log('dispatching', action);
        var result = next(action);
        console.log('next state', store.getState());
        return result;
      };
    };
  };


  return {
    mapStateToProps: mapStateToProps,
    mapDispatchToProps: mapDispatchToProps,
    middleware: [logger],
    //Combine reducers:
    reducers: {
      counter: counter,
      todos: todos
    }
  }

})();




// Connect Component:
var App = mag.reduxConnect(
  magRedux.mapStateToProps,
  magRedux.mapDispatchToProps,
  magRedux.reducers,
  magRedux.middleware
)(mag.mods.demo.Counter);


//Run instance:
var modInstance = App({
  anotherThing: true
})