Fork me on GitHub
#reitit
<
2020-04-02
>
jeff tang14:04:55

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]))))

manutter5114:04:01

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

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

manutter5114:04:27

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

manutter5114:04:42

(I hope :hand_with_index_and_middle_fingers_crossed: )

jeff tang14:04:32

(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)]
       ])))

jeff tang14:04:42

doesn't seem to have an effect

jeff tang14:04:25

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

manutter5114:04:22

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...]

manutter5114:04:56

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

manutter5114:04:51

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

manutter5114:04:27

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

jeff tang15:04:15

Thank you so much

jeff tang15:04:24

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

manutter5115:04:47

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

🍵 8
oly15:04:58

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].

oly16:04:31

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