Fork me on GitHub
#re-frame
<
2020-06-02
>
andrea.crotti11:06:39

anyone using antd with re-frame by any chance?

andrea.crotti11:06:24

I'm having an issue with a checkbox inside an ant table, and using re-frame subscriptions inside it

{:id     :selected
     :title  ""
     :render (fn [{:keys [id]}]
               (r/as-element
                [ant/checkbox
                 {:key       id
                  ;; FIXME: this is needed to make the select all work correctly
                  ;; :checked (contains? @(rf/subscribe [::handlers/selected-rows]) id)
                  :on-change #(rf/dispatch [::handlers/toggle-row id])}]))}

p-himik11:06:42

Can it be due to the fact that, uhm... the subscribe call is commented out? :)

andrea.crotti11:06:59

no it was not commented out before

andrea.crotti11:06:12

I just commented it out to have the checkbox working

andrea.crotti11:06:04

I wonder if it's somehow related to the fact that I use r/as-element instead of creating a more standard reagent component, and so it doesn't detect the fact there is a subscription?

andrea.crotti11:06:10

we use r/as-element in many places but never with a subscription inside, so I think it's a possible explanation

p-himik11:06:07

That's exactly what I was thinking. Seems like a good lead, but I don't have a deep enough knowledge of Reagent to confirm without experimenting. Try to refactor the [ant/checkbox ...] part into its own Reagent component, just so the subscribe call doesn't happen directly in that fn.

andrea.crotti12:06:25

ah nice after doing

(defn row-checkbox
  [{:keys [id]}]
  [ant/checkbox
   {:key       id
    :checked   (contains? @(rf/subscribe [::handlers/selected-rows]) id)
    :on-change #(rf/dispatch [::handlers/toggle-row id])}])
and :render #(r/as-element [row-checkbox (-> % js->clj keywordize-keys)]) it all works

andrea.crotti12:06:40

I'm not exactly sure why though

p-himik12:06:12

NP. My guess is that that fn that calls as-element is not called directly during the rendering phase, and so deref'ing the ratom does not register it as a source of updates for the component. Or maybe simply using as-element prevents that registration mechanism from working.

andrea.crotti12:06:44

well I'm still using as-element

andrea.crotti12:06:58

so your first guess is probably correct

p-himik12:06:19

Yeah, but now the subscription is wrapped in another component and not directly in an argument to as-element.

p-himik12:06:18

@U061V0GG2 Can you please share an opinion on the observed behavior? I couldn't find anything in the docs regarding using ratoms in as-element.

juhoteperi12:06:12

Render fn probably wasn't converted to Reagent component by anything, so the ratoms couldn't register change listener. (r/as-component (fn ...)) might have worked.

👍 4
juhoteperi12:06:28

But not sure where this render property is used

andrea.crotti12:06:35

but yeah having it as a separate component/function works well already

andrea.crotti11:06:53

given that code even when the subscriptions changes the checked status never changes, I suspect the re-render is not triggered