   #(step {:id msg-id}))
 
 
-(defn greeting []
+;: VIEW
+
+(defn counter [count inc-msg dec-msg]
+  (.log js/console (str "render counter " inc-msg))
+  [:div
+   [:h2 (str "count " count)]
+   [:button 
+    {:on-click (on-click inc-msg)}
+    "+"]
+   [:button 
+    {:on-click (on-click dec-msg)}
+    "-"]])
+
+(defn greeting [state]
   (.log js/console "render greeting")
   [:div
-   [:h1 (:text @app-state)]
+   [:h1 (:text state)]
    [:input 
     {:on-change (on-change :change-text)
-     :value (:text @app-state)}]
-   [:h2 (str "count " (:count @app-state))]
-   [:button 
-    {:on-click (on-click :inc)}
-    "+"]
-   [:button 
-    {:on-click (on-click :dec)}
-    "-"]])
+     :value (:text state)}]
+   [counter (:count state) :inc :dec]
+   [counter (:count2 state) :inc2 :dec2]])
 
-(reagent/render [greeting] (js/document.getElementById "app"))
+
+(defn app []
+  (.log js/console "render app")
+  [greeting @app-state])
+
+(reagent/render [app] (js/document.getElementById "app"))

(defmethod step :dec [m]
  (swap! app-state update :count dec))



(defn on-change [msg-id]
  #(step {:id msg-id

  (fn [{:keys [id]}]
   id))


;; UPDATE
(defmethod step :change-text [m]
  (swap! app-state assoc :text (:text m)))

