Untitled

<!DOCTYPE html>
<html>

<head>
  <link href="//cdn.jsdelivr.net/picnicss/4.1.1/picnic.min.css" rel="stylesheet">
</head>

<body>

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

  <div id="test">
    <p></p>
    <button></button>
  </div>

  <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.0.21.3.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.22.min.js"></script>
  <script src="//rawgit.com/magnumjs/mag.js/master/src/addons/redux-middleware.js"></script>

  <script src="redux.js"></script>
  <script src="module.js"></script>
  <script src="init.js"></script>
</body>

</html>

//Component definition and instance creation - not executed
var mod = mag.create('test',{
  
  controller: function(props) {

    this.button = {
      _onClick: props.clickText,
      _text: "What time is it?"
    }

  },

  view: function(state, props) {

    state.p = props.mod.text

  }
});

//Redux State reducer: 
var reducer = function(state, action) {
  if (!state) {
    return {
      text: "ZZZ"
    };
  }

  switch (action.type) {
    case "TEXT_CHANGE":
      return Object.assign({}, state, {
        text: action.text
      });

    default:
      return state;
  }
};

//Connect & run Component:
mag.reduxConnect({}, {
  clickText: function() {
    return {
      type: "TEXT_CHANGE",
      text: "It's currently: " + (new Date()).toTimeString()
    }
  }
}, {
  "mod": reducer
}, [Redux.middle.logger])(mod);