bhauman / devcards

Devcards aims to provide a visual REPL experience for ClojureScript
1.53k stars 113 forks source link

Make Reagent devcards update on atom changes #98

Closed grav closed 6 years ago

grav commented 8 years ago

I had a problem with state-dependent components not updating when I mutated the state:

http://recordit.co/Az2hgc9gUu

I must admit I'm not fully aware of what :watch-atom does, but swapping it from false to true in the defcard-rg macro did the trick.

http://recordit.co/jTW4C6btET

Before, I had to wrap a component like this:

(defn my-counter [{:keys [count on-click]}] 
  [:div [:button {:on-click on-click} "Click!"]
   (str "Clicked " count " times.")])

(defn- wrap-my-counter [state-atom] 
  [my-counter {:count    (:count @state-atom)
               :on-click #(swap! state-atom update-in [:count] inc)}])

(defcard-rg my-counter
            (fn [state-atom _]
              [wrap-my-counter state-atom])
            (reagent.core/atom {:count 0})
            {:inspect-data true}) 

but with this patch, I can inline the call to the wrapper:

(defn my-counter [{:keys [count on-click]}]
  [:div [:button {:on-click on-click} "Click!"]
   (str "Clicked " count " times.")])

(defcard-rg my-counter
            (fn [state-atom _]
              [my-counter {:count    (:count @state-atom)
                           :on-click #(swap! state-atom update-in [:count] inc)}])
            (reagent.core/atom {:count 0})
            {:inspect-data true})
bhauman commented 8 years ago

Yeah this won't work. This will cause bad behavior because reagent handles its own atom watching and re-rendering.

You have to add :watch-atom true explicitely if you are passing a function to defcard-rg. And this is only helpfull for top level components. What really needs to happen is we probably need to wrap the function in a react component that handles the atom listening.

But for now the function case is a bit pathological. Some more thought is needed here ...

maio commented 8 years ago

How about solution in #100 ?