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 remote!</h1>
  <a target="_tab" href="https://github.com/magnumjs/mag.js">GitHub</a>
  <hr/>

  <div id="todos">
    <div>
      <input>
      <button name="add">Add</button>
      <button name="reset">Reset</button>
      <ul>
        <li></li>
      </ul>
    </div>
  </div>

  <script src="//cdn.rawgit.com/MaxArt2501/object-observe/master/dist/object-observe.min.js"></script>
  <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="//rawgit.com/magnumjs/mag.js/master/src/addons/redux-middleware.js"></script>
  <script src="//rawgit.com/magnumjs/mag.js/master/src/addons/redux-remote.js"></script>

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

</html>

var Todos = {}

Todos.controller = function(props) {
  this.input = ''
}

Todos.view = function(state, props) {

  state.li = props.todos || []

  state.reset = {
    _onClick: props.reset
  }

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

//Types:
var types = {
  ADD_TODO: 'ADD_TODO',
  RESET: 'RESET'
}


// Action:
var actions = {
  reset: {
    type: types.RESET
  },
  addTodo: {
    type: types.ADD_TODO,
    text: ''
  }
}

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


//Create remote reducer with existing reducer
var remoter = Redux.remoteReducer({
  source: 'https://api.myjson.com/bins/1dhbc', // remote source url for our data
  types: types, // action types to merge with
  actions: actions, // actions to merge with
  reducer: todos // reducer
});

//Convert reducer to remote:
var reducers = {todos : remoter.reducer};

//Required middleware for remoteRedux:
var middleware = [Redux.middle.readyStatePromise]

//Connect Component:
var App = mag.reduxConnect({},
  actions, reducers, middleware
)('todos', Todos);

//Init remoter:
remoter.init(App)

//Start component:
var modInstance = App({
  anotherThing: true
})