Fork me on GitHub
#re-frame
<
2022-07-14
>
Daniel Craig17:07:21

Re-com question here: why aren't my subscriptions running when I click my cloud button?

;; views.cljs
(defn cloud [cloudId]
  (let [cloud (re-frame/subscribe [::subs/cloud cloudId])]
    [re-com/md-icon-button
     :md-icon-name (if @cloud "zmdi-cloud" "zmdi-cloud-outline")
     :on-click (fn [] (re-frame/dispatch [::events/toggle-cloud cloudId]))]))

;; subs.cljs
(re-frame/reg-sub
 ::clouds
 (fn [db]
   (:clouds db)))

(re-frame/reg-sub
 ::cloud
 :<- [::clouds]
 (fn [clouds [_ cloudId]]
   (nth clouds cloudId)
   ))

p-himik18:07:00

What do you mean by "aren't running"?

Daniel Craig18:07:38

reframe-10x doesn't show that they've run, and the icon of the cloud doesn't change after I click on it, despite the app db being updated

p-himik18:07:59

How do you use cloud? What is ::events/toggle-cloud?

Daniel Craig18:07:48

cloud is a true or false value that represents whether it's cloudy in a particular spot or not. I'll need to send toggle-cloud later, so sorry but I'm not at my computer

Daniel Craig18:07:16

It basically does (update clouds cloudId not)

p-himik18:07:35

I mean, how do you use the cloud component? Not just its direct usage, but also its parent component.

Daniel Craig19:07:38

I have a clouds component that does (map cloud (range 50))

Daniel Craig19:07:30

Could that be it? The map makes a seq of clouds, but are they actually components?

p-himik20:07:17

Hard to say without the actual code.

p-himik20:07:50

And they are not components in this case - just functions. Sometimes it's ok, but not in this case as updating a single cloud will rerender the whole parent component.

Daniel Craig20:07:00

Ok thanks for looking over it with me. Sorry, I'm away from my computer or I would share the code in full

p-himik20:07:53

That's fine, I'm in no hurry. :)

Daniel Craig03:07:54

I got the issue resolved by doing it this way as opposed to doing (map cloud (range 50)):

(defn cloud [cloudId]
  (let [cloud (re-frame/subscribe [::subs/cloud cloudId])]
    [re-com/md-icon-button
     :md-icon-name (if @cloud "zmdi-cloud" "zmdi-cloud-outline")
     :on-click (fn [] (re-frame/dispatch [::events/toggle-cloud cloudId]))]))

(defn clouds []
  [re-com/h-box
   :src      (at)
   :width    "100%"
   :children [(for [cloudId (range 50)]
                [cloud cloudId])]])

p-himik07:07:56

for is also lazy, so you probably have a bunch of warnings in the JS console about missing key property. You can do this instead:

(mapv (fn [cloudId] [cloud cloudId]) (range 50))

p-himik07:07:08

Since mapv returns a vector, it's not lazy anymore.

Daniel Craig20:07:08

Oh that's a great tip, thanks!

👍 1