音楽とプログラムと

基本的に散文。音楽とか、プログラムとか。

re-frameでas-element内でsubscribeが効かない

auth0のSPAのreactのサンプルを見ながら re-frameでやってみてる。

auth0のサンプルではReact Hooksを使っていたので Reagentでそのまま書くとうまく動かず、どうやら ReagentはJavaScriptでのClass 構文と同様のものになるらしく as-elementというのを使うようだ。 https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md

(:require 
  [reagent.core :as r]
  ["@auth0/auth0-react" :refer (Auth0Provider useAuth0)])

(defn view []
    (let [
        useAuth0 (js->clj (useAuth0))
        {:strs [user
                isAuthenticated
                loginWithRedirect
                getIdTokenClaims
                isLoading
                logout]} useAuth0
        logoutWithRedirect #(logout {:returnTo "redirect/path"})
        {:strs [name email picture sub]} (js->clj user)]
  (r/as-element
    [:div @(subscribe [::some-sub])]
    (if-not isAuthenticated
      [button {:color    "blue"
               :on-click #(loginWithRedirect)} "Login"]
      [button {:on-click #(logoutWithRedirect)} "Log out"])))

これでauth0の提供する関数が使えるようになった。 render関数には [:> view]と書いて渡す。

しかしながら subscribeが効かない! @auth0/auth0-reactを使わず、バニラJavaScript用のを使うか、 renderするときに、as-elementじゃないものを同時に指定して解決するかどうするか。。