diff --git a/examples/simple/src/simple/core.cljs b/examples/simple/src/simple/core.cljs index 2940d0e78..30c10df9b 100644 --- a/examples/simple/src/simple/core.cljs +++ b/examples/simple/src/simple/core.cljs @@ -1,86 +1,62 @@ (ns simple.core (:require [reagent.dom.client :as rdc] - [re-frame.core :as rf])) - -;; A detailed walk-through of this source code is provided in the docs: -;; https://day8.github.io/re-frame/dominoes-live/ - -;; -- Domino 1 - Event Dispatch ----------------------------------------------- - -(defn dispatch-timer-event - [] - (let [now (js/Date.)] - (rf/dispatch [:timer now]))) ;; <-- dispatch used - -;; Call the dispatching function every second. -;; `defonce` is like `def` but it ensures only one instance is ever -;; created in the face of figwheel hot-reloading of this file. -(defonce do-timer (js/setInterval dispatch-timer-event 1000)) - -;; -- Domino 2 - Event Handlers ----------------------------------------------- - -(rf/reg-event-db ;; sets up initial application state - :initialize ;; usage: (dispatch [:initialize]) - (fn [_ _] ;; the two parameters are not important here, so use _ - {:time (js/Date.) ;; What it returns becomes the new application state - :time-color "orange"})) ;; so the application state will initially be a map with two keys - -(rf/reg-event-db ;; usage: (dispatch [:time-color-change 34562]) - :time-color-change ;; dispatched when the user enters a new colour into the UI text field - (fn [db [_ new-color-value]] ;; -db event handlers given 2 parameters: current application state and event (a vector) - (assoc db :time-color new-color-value))) ;; compute and return the new application state - -(rf/reg-event-db ;; usage: (dispatch [:timer a-js-Date]) - :timer ;; every second an event of this kind will be dispatched - (fn [db [_ new-time]] ;; note how the 2nd parameter is destructured to obtain the data value - (assoc db :time new-time))) ;; compute and return the new application state - -;; -- Domino 4 - Query ------------------------------------------------------- - -(rf/reg-sub - :time - (fn [db _] ;; db is current app state. 2nd unused param is query vector - (:time db))) ;; return a query computation over the application state - -(rf/reg-sub - :time-color - (fn [db _] - (:time-color db))) - -;; -- Domino 5 - View Functions ---------------------------------------------- - -(defn clock - [] - (let [colour @(rf/subscribe [:time-color]) - time (-> @(rf/subscribe [:time]) - .toTimeString - (clojure.string/split " ") - first)] - [:div.example-clock {:style {:color colour}} time])) - -(defn color-input - [] - (let [gettext (fn [e] (-> e .-target .-value)) - emit (fn [e] (rf/dispatch [:time-color-change (gettext e)]))] - [:div.color-input - "Display color: " - [:input {:type "text" - :style {:border "1px solid #CCC"} - :value @(rf/subscribe [:time-color]) ;; subscribe - :on-change emit}]])) ;; <--- - -(defn ui - [] - [:div - [:h1 "The time is now:"] - [clock] - [color-input]]) - -;; -- Entry Point ------------------------------------------------------------- + [re-frame.core :as rf] + [reagent.core :as r])) (defonce root-container (rdc/create-root (js/document.getElementById "app"))) +(rf/reg-sub :bar :-> :bar) +(rf/reg-sub :baz :-> :baz) +(rf/reg-sub :bar-or-baz? :-> :bar-or-baz?) + +(rf/reg-sub :sub/bar + :<- [:bar] + (fn [bar _] + (str "BAR " (gensym)))) + +(rf/reg-sub :sub/baz + :<- [:baz] + (fn [baz _] + (str "BAZ " (gensym)))) + +(rf/reg-event-db + :update + (fn [db [_ & args]] + (apply update db args))) + +(defn bad-component + [foo?] + (if foo? + @(rf/subscribe [:sub/bar]) + @(rf/subscribe [:sub/baz]))) + +(rf/reg-sub :foo :-> :foo) +(rf/reg-sub :boo :-> :boo) +(rf/reg-sub :sub/foo :<- [:foo] (fn [foo [_ n]] (* foo n))) + +(defn another-bad-component + [x] + @(rf/subscribe [:sub/foo x])) + +(def x (r/atom 0)) +(def foo-backup (r/atom 0)) + +(defn ui [] + [:<> + [:h1 "A bad component"] + [:button {:on-click #(rf/dispatch [:update :bar-or-baz? not])} + "Switch bar<->baz"] + [:button {:on-click #(rf/dispatch [:update :bar not])} "Update bar!"] + [:button {:on-click #(rf/dispatch [:update :baz not])} "Update baz!"] + [bad-component @(rf/subscribe [:bar-or-baz?])] + [:h1 "Another bad component"] + [:button {:on-click #(swap! x inc)} "inc x"] + [:button {:on-click #(do (rf/dispatch [:update :foo inc]) + (swap! foo-backup inc))} "inc foo"] + (str "x is " @x ". foo is " @foo-backup "...... " @x " times " @foo-backup " is ") + [another-bad-component @x]]) + (defn mount-ui [] (rdc/render root-container [ui])) @@ -95,5 +71,4 @@ (defn run ;; Your app calls this when it starts. See shadow-cljs.edn :init-fn. [] - (rf/dispatch-sync [:initialize]) ;; put a value into application state (mount-ui)) ;; mount the application's ui into '
'