Why are multi-methods not working as functions for Reagent/Re-frame?

问题

In a small app I'm building that uses Reagent and Re-frame I'm using multi-methods to dispatch which page should be shown based on a value in the app state:

(defmulti pages :name)

(defn main-panel []
  (let [current-route (re-frame/subscribe [:current-route])]
    (fn []
      ;...
      (pages @current-route))))

and then I have methods such as:

(defmethod layout/pages :register [_] [register-page])

where the register-page function would generate the actual view:

(defn register-page []
  (let [registration-form (re-frame/subscribe [:registration-form])]
    (fn []
      [:div
       [:h1 "Register"]
       ;...
       ])))

I tried changing my app so that the methods generated the pages directly, as in:

(defmethod layout/pages :register [_]
  (let [registration-form (re-frame/subscribe [:registration-form])]
    (fn []
      [:div
       [:h1 "Register"]
       ;...
       ])))

and that caused no page to ever be rendered. In my main panel I changed the call to pages to square brackets so that Reagent would have visibility into it:

(defn main-panel []
  (let [current-route (re-frame/subscribe [:current-route])]
    (fn []
      ;...
      [pages @current-route])))

and that caused the first visited page to work, but after that, clicking on links (which causes current-route to change) has no effect.

All the namespaces defining the individual methods are required in the file that is loaded first, that contains the init function, and the fact that I can pick any single page and have it displayed proves the code is loading (then, switching to another page doesn't work):

https://github.com/carouselapps/ninjatools/blob/master/src/cljs/ninjatools/core.cljs#L8-L12

In an effort to debug what's going on, I defined two routes, :about and :about2, one as a function and one as a method:

(defn about-page []
  (fn []
    [:div "This is the About Page."]))

(defmethod layout/pages :about [_]
  [about-page])

(defmethod layout/pages :about2 [_]
  (fn []
    [:div "This is the About 2 Page."]))

and made the layout print the result of calling pages (had to use the explicit call instead of the square brackets of course). The wrapped function, the one that works, returns:

[#object[ninjatools$pages$about_page "function ninjatools$pages$about_page(){
return (function (){
return new cljs.core.PersistentVector(null, 2, 5, cljs.core.PersistentVector.EMPTY_NODE, [new cljs.core.Keyword(null,"div","div",1057191632),"This is the About Page."], null);
});
}"]]

while the method returns:

#object[Function "function (){
return new cljs.core.PersistentVector(null, 2, 5, cljs.core.PersistentVector.EMPTY_NODE, [new cljs.core.Keyword(null,"div","div",1057191632),"This is the About 2 Page."], null);
}"]

If I change the method to be:

(defmethod layout/pages :about2 [_]
  [(fn []
     [:div "This is the About 2 Page."])])

that is, returning the function in a vector, then, it starts to work. And if I make the reverse change to the wrapped function, it starts to fail in the same manner as the method:

(defn about-page []
  (fn []
    [:div "This is the About Page."]))

(defmethod layout/pages :about [_]
  about-page)

Makes a bit of sense as Reagent's syntax is [function] but it was supposed to call the function automatically.

I also started outputting @current-route to the browser, as in:

[:main.container
 [alerts/view]
 [pages @current-route]
 [:div (pr-str @current-route)]]

and I verified @current-route is being modified correctly and the output updated, just not [pages @current-route].

The full source code for my app can be found here: https://github.com/carouselapps/ninjatools/tree/multi-methods

Update: corrected the arity of the methods following Michał Marczyk's answer.

回答1:

So, a component like this: [pages @some-ratom]
will rerender when pages changes or @some-ratom changes.

From reagent's point of view, pages hasn't changed since last time, it is still the same multi-method it was before. But @some-ratom might change, so that could trigger a rerender.

But when this rerender happens it will be done using a cached version of pages. After all, it does not appear to reagent that pages has changed. It is still the same multimethod it was before.

The cached version of pages will, of course, be the first version of pages which was rendered - the first version of the mutlimethod and not the new version we expect to see used.

Reagent does this caching because it must handle Form-2 functions. It has to keep the returned render function.

Bottom line: because of the caching, multimethods won't work very well, unless you find a way to completely blow up the component and start again, which is what the currently-top-voted approach does:
^{:key @current-route} [pages @current-route]
Of course, blowing up the component and starting again might have its own unwelcome implications (depending on what local state is held in that component).

Vaguely Related Background:
https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components#appendix-a---lifting-the-lid-slightly
https://github.com/Day8/re-frame/wiki/When-do-components-update%3F

回答2:

I don't have all the details, but apparently, when I was rendering pages like this:

[:main.container
 [alerts/view]
 [pages @current-route]]

Reagent was failing to notice that pages depended on the value of @current-route. The Chrome React plugin helped me figure it out. I tried using a ratom instead of a subscription and that seemed to work fine. Thankfully, telling Reagent/React the key to an element is easy enough:

[:main.container
 [alerts/view]
 ^{:key @current-route} [pages @current-route]]

That works just fine.

回答3:

The first problem that jumps out at me is that your methods take no arguments:

(defmethod layout/pages :register [] [register-page])
                                  ^ arglist

Here you have an empty arglist, but presumably you'll be calling this multimethod with one or two arguments (since its dispatch function is a keyword and keywords can be called with one or two arguments).

If you want to call this multimethod with a single argument and just ignore it inside the body of the :register method, change the above to

(defmethod layout/pages :register [_] [register-page])
                                   ^ argument to be ignored

Also, I expect you'll probably want to call pages yourself like you previously did (that is, revert the change to square brackets that you mentioned in the question).

This may or may not fix the app – there may be other problems – but it should get you started. (The multimethod will definitely not work with those empty arglists if you pass in any arguments.)

回答4:

How about if you instead have a wrapper pages-component function which is a regular function that can be cached by reagent. It would look like this:

(defn pages-component [state]
  (layout/pages @state))

来源：https://stackoverflow.com/questions/33299746/why-are-multi-methods-not-working-as-functions-for-reagent-re-frame

标签

clojure

clojurescript

reagent

re-frame