First attempt to tackle @slorber's problem

Reference: evancz/elm-architecture-tutorial#50

README.md

@@ -398,6 +398,7 @@ export default {
 - [Saga pattern (Withdraw saga)](examples/withdraw-saga.js)
 - [How to handle optmistic updates (optmistic counter)](examples/optmistic-counter.js)
 - [How to test events and effects](examples/test-delayed-counter.js)
+- [Sébastien Lorber's problem (Reference: https://github.com/evancz/elm-architecture-tutorial/issues/50)](examples/slorber.js)
 
 ## Type safety
 

examples/compose.js

@@ -1,15 +1,20 @@
 import React from 'react'
 import { Rx } from 'tom'
 
-const composeStates = (x, y) => {
+function composeStates(x, y) {
   return {
     model: [x.model, y.model],
     effect: [x.effect, y.effect]
   }
 }
+
+function isNotNil(x) {
+  return x !== null && x !== undefined
+}
+
 const empty = Rx.Observable.just(null)
-const isNotNil = x => x !== null && x !== undefined
 
+// apps as groupoid
 export default function compose(x, y) {
   return {
     init() {
@@ -22,12 +27,12 @@ export default function compose(x, y) {
       )
     },
     view([mx, my], dispatch) {
-      const dispatch0 = event => dispatch([event])
-      const dispatch1 = event => dispatch([null, event])
+      const dispatchx = event => dispatch([event])
+      const dispatchy = event => dispatch([null, event])
       return (
         <div>
-          {x.view(mx, dispatch0)}
-          {y.view(my, dispatch1)}
+          {x.view(mx, dispatchx)}
+          {y.view(my, dispatchy)}
         </div>
       )
     },

examples/slorber.js

@@ -0,0 +1,63 @@
+import React from 'react'
+import compose from './compose'
+import counter from './counter'
+
+const counters = compose(counter, compose(counter, counter))
+
+function findEvent(event, predicate) {
+  if (event) {
+    if (Array.isArray(event)) {
+      return findEvent(event[0], predicate) || findEvent(event[1], predicate)
+    }
+    if (predicate(event)) {
+      return event
+    }
+  }
+}
+
+function isCounterEvent(event) {
+  return event === 'INCREMENT_REQUEST' || event === 'DECREMENT_REQUEST'
+}
+
+function composeStates(count, state) {
+  return {
+    model: {
+      count,
+      counters: state.model
+    },
+    effect: state.effect
+  }
+}
+
+function getCount(count, event) {
+  if (event === 'INCREMENT_REQUEST' && count < 3) {
+    return count + 1
+  }
+  if (event === 'DECREMENT_REQUEST' && count > 0) {
+    return count - 1
+  }
+  return count
+}
+
+export default {
+  init() {
+    return composeStates(0, counters.init())
+  },
+  update(model, event) {
+    return composeStates(
+      getCount(model.count, findEvent(event, isCounterEvent)),
+      counters.update(model.counters, event)
+    )
+  },
+  view(model, dispatch) {
+    return (
+      <div>
+        <p>Count: {model.count}</p>
+        {counters.view(model.counters, dispatch)}
+      </div>
+    )
+  },
+  run(effect, event$) {
+    return counters.run(effect, event$)
+  }
+}