Clojurians Log v2

Hi! I'm using reitit-frontend within a re-frame project. I'm having trouble getting my subscription for :current-route to update properly when I refresh the page on a not / page, e.g. /#/about

; views.cljs...
(defn main-panel []
  (let [current-route @(subscribe [:current-route])]
    (fn []
      [:div
       [:h1 "Hello World"]
       [:p (str "Current Route: " (-> current-route :data :name))] ;; <-----  :current-route initial value is nil, so this starts as empty string
       ])))

; router.cljs...
(defn on-navigate [new-match]
  (when new-match
    (do (prn "on-navigate ->")
        (cljs.pprint/pprint new-match) ;; <---------------- prints the correct match, db updates current-route, but view is not re-rendered
        (dispatch [:navigated new-match]))))

Might be a React quirk. Try this: before the first [:div in main-panel, put

^{:key (str "main-" (-> current-route :data :name))}

That will give React a kick in the pants to force a re-render of your div.

(I hope :hand_with_index_and_middle_fingers_crossed: )

(defn main-panel []
  (let [current-route @(subscribe [:current-route])]
    (fn []
      ^{:key (str "main-" (-> current-route :data :name))}
      [:div
       [:h1 "Hello World"]
       [:p (str "Current Route: " (-> current-route :data :name))]
       [match-name (-> current-route :data :name)]
       ])))

doesn't seem to have an effect

Using 10-x, I can see that the event is being called and the db updates

Hmm, the route name is changing, right? If so, then the other thing I’d try is moving the ^{:key...} line down to just above the [:p...]

Oh wait, you want @(subscribe...) inside your render function

Ohhhh

Shouldn’t need the ^{:key...} trick at all, just move the subscribe deref.

The subscribe can be in an outer let, but the @ has to be inside the fn.

Thank you so much

I had a hunch it was a layer-2 vs layer-1 but the deref was a lot more subtle

thank you @manutter51

I’d have picked up on that quicker but I had to go off coffee for health reasons 😕

is there a way to get a multi select, {1: "select one"} {2: "select two"} so you can select one or two or both giving you a list of [1] or [1,2].

I have been looking in spec tools, but have not found what I am looking for