33 (:require [reagent.core :as reagent :refer [atom]]
44 [re-frame.core :refer [register-handler
55 path
6- register-sub
7- dispatch
6+ register-sub
7+ dispatch
8+ dispatch-sync
89 subscribe]]))
910
10-
11+ ; ; trigger a dispatch every second
1112(defonce time-updater (js/setInterval
1213 #(dispatch [:timer (js/Date. )]) 1000 ))
1314
14- ; ;; this is the initial state
15- (defonce initial-state
15+ (def initial-state
1616 {:timer (js/Date. )
1717 :time-color " #f34"
1818
19- ; ; Handlers
20- ; -------------------------------------------------------------
2119
22- ; ; This handler sets the initial state
23- ( register-handler
24- ; ; the handler is passed a map (not an atom) and must return the new state
25- ; ; of the db
26- :initialize
20+ ; ; -- Event Handlers ----------------------------------------------------------
21+
22+
23+ ( register-handler ; ; setup initial state
24+ :initialize ; ; usage: (submit [:initialize])
2725 (fn
2826 [db _]
29- (merge db initial-state)))
27+ (merge db initial-state))) ; ; what it returns becomes the new state
28+
3029
31- ; ; This handler changes the color of the displayed time
3230(register-handler
33- ; ;; register-handler can take 3 arguments to allow you to insert middleware
34- ; ;; see https://github.com/Day8/re-frame/wiki/Handler-Middleware
35- :time-color
36- (path [:time-color ])
31+ :time-color ; ; usage: (submit [:time-color 34562])
32+ (path [:time-color ]) ; ; this is middleware
3733 (fn
38- ; ; the path handler allows you to get directly to items in the database
39- ; ; return the value you want assoc'd in
40- [time-color [_ value]]
34+ [time-color [_ value]] ; ; path middleware adjusts the first parameter
4135 value))
4236
43- ; ; This handler changes the value of the time
37+
4438(register-handler
4539 :timer
4640 (fn
4741 ; ; the first item in the second argument is :timer the second is the
4842 ; ; new value
4943 [db [_ value]]
50- (assoc db :timer value)))
44+ (assoc db :timer value))) ; ; return the new version of db
45+
46+
47+ ; ; -- Subscription Handlers ---------------------------------------------------
48+
5149
52- ; ; add subscriptions to :timer and :time-color
5350(register-sub
5451 :timer
5552 (fn
56- [db _]
57- ; ; you need to wrap your subscription code in a reaction
58- ( reaction ( :timer @db))))
53+ [db _] ; ; db is the app-db atom
54+ ( reaction ( :timer @db)))) ; ; wrap the compitation in a reaction
55+
5956
6057(register-sub
6158 :time-color
6259 (fn
6360 [db _]
64- ; ; you need to wrap your subscription code in a reaction
6561 (reaction (:time-color @db))))
6662
67- (dispatch [:initialize ])
6863
64+ ; ; -- View Components ---------------------------------------------------------
6965
70- (defn greeting [message]
66+ (defn greeting
67+ [message]
7168 [:h1 message])
7269
73- (defn clock []
70+
71+ (defn clock
72+ []
7473 (let [time-color (subscribe [:time-color ])
7574 timer (subscribe [:timer ])]
76- ; ;; wrap your component in a function to use the suscription
77- (fn []
78- ; ; note that the initialize call will not be dispatched immediately
79- ; ; as it is an async call
80- (when @timer
81- (let [time-str (-> @timer .toTimeString (clojure.string/split " "
82- [:div.example-clock
83- {:style {:color @time-color}}
84- time-str])))))
85-
86- (defn color-input []
75+
76+ (fn clock-render
77+ []
78+ (let [time-str (-> @timer
79+ .toTimeString
80+ (clojure.string/split " "
81+ first)
82+ style {:style {:color @time-color}}]
83+ [:div.example-clock style time-str]))))
84+
85+
86+ (defn color-input
87+ []
8788 (let [time-color (subscribe [:time-color ])]
88- ; ;; wrap your component in a function to use the suscription
89- (fn []
90- [:div.color-input
91- " Time color: "
92- [:input {:type " text"
93- :value @time-color
94- :on-change #(dispatch
95- [:time-color (-> % .-target .-value)])}]])))
96-
97- (defn simple-example []
89+
90+ (fn color-input-render
91+ []
92+ [:div.color-input
93+ " Time color: "
94+ [:input {:type " text"
95+ :value @time-color
96+ :on-change #(dispatch
97+ [:time-color (-> % .-target .-value)])}]])))
98+
99+ (defn simple-example
100+ []
98101 [:div
99102 [greeting " Hello world, it is now"
100103 [clock]
101104 [color-input]])
102105
103- (defn ^:export run []
106+
107+ ; ; -- Entry Point -------------------------------------------------------------
108+
109+
110+ (defn ^:export run
111+ []
112+ (dispatch-sync [:initialize ])
104113 (reagent/render [simple-example]
105- (js/document.getElementById " app"
114+ (js/document.getElementById " app"
0 commit comments