Why isn't my re-frame component reloading on data change?

Webdev_Tory · February 27, 2020, 6:57pm

I have the following, which I want to see change whenever things cause :events in my DB to change. Why doesn’t it update in real-time?

(defn timeline
  "Timeline Component"
  []
  (let [timeline-id "timeline"
	events (rfc/subscribe [:events])
	invoke #(invoke-timeline! timeline-id @events)]
    (r/create-class
     {:component-did-mount invoke
      :component-did-update invoke
      :display-name "timeline-viz"
      :reagent-render (fn []
			[:div {:id timeline-id}
			 [:h1.title "Timeline"]])})))

dimovich · February 27, 2020, 9:48pm

You are not derefing the events inside your component. You can do sth like this to let Reagent know that you want to redraw the component when events change.

:reagent-render (fn []
                  @events
                  [:div {:id timeline-id}
                   [:h1.title "Timeline"]])

wazound · March 1, 2020, 1:03am

You’ll need a two level arrangement.

This resource will get you going in the right direction

github.com

day8/re-frame/blob/master/docs/Using-Stateful-JS-Components.md

## Using Stateful JS Components 

You know what's good for you, and you know what's right.  But it
doesn't matter - the wickedness of the temptation is too much. 

The JS world is brimming with shiny component baubles: D3, 
Google Maps, Chosen, etc.  

But they are salaciously stateful and mutative.  And, you, 
raised in a pure, functional home, with caring, immutable parents, 
know they are wrong.  But, my, how you still yearn for the sweet 
thrill of that forbidden fruit. 

I won't tell, if you don't.  But careful plans must be made  ... 

### The overall plan 

To use a stateful js component, you'll need to write two Reagent components:
  - an **outer component** responsible for sourcing data via a subscription or r/atom or cursor, etc.  
  - an **inner component** responsible for wrapping and manipulating the stateful JS component via lifecycle functions.

This file has been truncated. show original

Webdev_Tory · March 2, 2020, 4:43pm

Excellent resource. Thanks!

Webdev_Tory · March 2, 2020, 4:45pm

Ah! I always get confused whether it’s where I subscribe to the atom, or where I deref it. Thanks! Having done this, I found the deeper problem that the underlying library simply isn’t compatible with React updates (on data change, it appends multiple blank things into the place, rather than replacing anything, and they don’t seem to have compatible data-stores). Time to rewrite the library in happy cljs.