Shallow

examples/basic/package.json

@@ -10,7 +10,9 @@
   "dependencies": {
     "delay": "^1.3.1",
     "react": "^15.3.0",
-    "react-dom": "^15.3.0"
+    "react-dom": "^15.3.0",
+    "redux": "^3.6.0",
+    "redux-devtools-extension": "^1.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

examples/basic/src/components/App.js

@@ -5,17 +5,26 @@ export default class App extends React.Component {
   constructor(){
     super()
     model.times.bind(this);
-    model.other.times.bind(this);
+    model.other.bind(this);
   }
   render(){
-    // console.log(this.state);
+    // console.log(this.state)
     return (
       <div>
-        <div>you clicked {this.state.times.active} times and {this.state.other.times.active} other times</div>
+        <div>you clicked 
+        <span style={{color: this.state.times.color}}>
+          : {this.state.times.active} times
+        </span> and<span style={{color: this.state.other.color}}>
+          : {this.state.other.active} other
+        </span> times</div>
         <button onClick={e => {
-          model.times.add(3).then(model.other.add);
+          // console.log('hi');
+          model.times.add().then(ns => {
+            // console.log('nsApp', ns)
+          });
         }}>add</button>
         <button onClick={model.other.add}>other add</button>
+        <button onClick={e => model.dispatch({type: 'CALL', piece: 'times', method: 'add', args: {}})}>dispatch</button>
       </div>
     )
   }

examples/basic/src/index.js

@@ -1,14 +1,22 @@
 import React from 'react'
 import { render } from 'react-dom'
 import App from './components/App'
-import model from './model'
 
-model.times.subscribe(function (newState, propPath, callback) {
-  console.log('times has changed', newState, propPath, callback);
-  if (callback)
-    callback();
-});
+// import { createStore } from 'redux';
+// import model from './model'
 
+// function reducer (state, action) {
+//   return model.getState();
+// }
+// var initialState = model.getState();
+// var enhancer = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
+// var store = createStore(reducer, initialState, enhancer);
+// store.subscribe(() => {
+//   var s = store.getState();
+// console.log('s', s);
+//   model.setState(s);
+// })
+// model.subscribe(store.dispatch);
 render(
     <div><App /></div>,
   document.getElementById('root')

examples/basic/src/model.js

@@ -1,45 +1,31 @@
-import { createController } from '../../../modelux';
+import { createModel } from '../../../modelux';
 import delay from 'delay';
-export default createController({
+
+export default createModel({
+    add: function () {
+        this.setState(delay(2000)
+            .then(() => (s, g) => ({
+                active: s.active + 1,
+                color: s.color === 'red' ? 'green' : 'red'
+            }))
+        );
+        return (s, g) => delay(1000)
+            .then(() => ({
+                active: s.active + 1,
+                color: s.color === 'red' ? 'green' : 'red'
+            }));
+    },
     times: {
-        initial: {
-            active: 8
-        },
-        add: function (n) {
-            n = n || 1;
-            var other = this.getState(['other', 'times']);
-            var s = this.getState();
-            delay(1000)
-                .then(() => this.setState({active: s.active + other.active + n}))
-                .then(this.resolve);
-            return {active: 'loading...'};
-        },
-        remove: function (n) {
-            n = n || 1;
-            var other = this.getState(['other', 'times']);
-            var s = this.getState();
-            delay(1000)
-                .then(() => this.setState({active: s.active - other.active - n}))
-                .then(this.resolve);
-            return {active: 'loading...'};
+        initialState: {
+            active: 5,
+            color: 'red'
         }
     },
     other: {
-        add: function () {
-            this.times.oneMore();
-        },
-        times: {
-            initial: function () {
-                return {
-                    active: 3
-                }
-            },
-            oneMore: function () {
-                var s = this.getState()
-                delay(1000)
-                    .then(() => this.setState({active: ++s.active}))
-                    .then(this.resolve);
-                return {active: 'loading...'};
+        initialState: function () {
+            return {
+                active: 3,
+                color: 'green'
             }
         }
     }