Clojurians Log v2
clojurescript
I am having a bit of an issue with UiX and ReFx, where I have a Router component and there’s a sibling in the tree that is a Dimmer div. This div is open/closed based on a value in ReFx db:
(reg-sub :inst-open? (fn [db _] (:inst-open? db)))
(reg-event-db :instructions (fn [db [_ v]] (assoc db :inst-open? v)))
(defn instructions-modal []
(let [open? (use-sub [:inst-open?])]
($ Dimmer {:on open?
:on-close (fn [] (dispatch [:instructions false]))} ....(refx/reg-sub
::current
(fn [db]
(::current-route db)))
(defui Router [{:keys [children]}]
(let [current-route (refx/use-sub [::current])]
(println "ROUTE" current-route)
(when current-route
($ (-> current-route :data :view)
children))))(defui root []
($ :<>
header
($ Router)
(footer)
(instructions-modal)))
Why is it (instructions-modal) and not ($ instructions-modal)?
Hm perhaps that’s the issue, the use-sub is not in a component of its own?
I'd think so. No idea about ReFx but it seems to be similar to () vs. [] in Reagent's Hiccup.
good eye, I didn’t even spot this problem
And, of course, also (footer) instead of ($ footer).
that one’s fine it doesn’t have any hooks
it’s just a snippet of html
that seems to have fixed it, thank you
learning React, one mistake at a time
I'd suggest to never call components as functions. A good rule of thumb is to always create React elements out of components, never call them as functions.
Hey is there a way to force rerender of the whole tree?
React component is not just producing markup, it encapsulates state/effects etc. using $ or <> in JSX you basically create an instance of the component
on hot reloads the changes don’t show up sometimes
> Hey is there a way to force rerender of the whole tree? I don't know. > on hot reloads the changes don’t show up sometimes is that related to uix/react or refx? what type of changes don't show up? do you have react-refresh setup https://github.com/pitch-io/uix/blob/master/docs/hot-reloading.md?
I’ll try the react refresh (though that is solving the issue with state being reset).
sounds like you don't have any hot reloading setup, that would explain why you don't see UI updates after reloads you either use traditional hot reloading (render from the root) or react-refresh, both are covered in the docs
Nah it kinda works sometimes and sometimes not
I’ll try with react-refresh
thanks