[cant-repro]

#797
day8 · Nov 9, 2023 · 05d7fb7 · 05d7fb7
1 parent f6f62b6
commit 05d7fb7
Showing 1 changed file with 53 additions and 78 deletions.
diff --git 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 '<div id="app" />'