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"]])})))
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"]])
1 Like
You’ll need a two level arrangement.
This resource will get you going in the right direction
## 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
1 Like
Excellent resource. Thanks!
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.
system
Closed
September 1, 2020, 4:45am
6
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.