Question

考虑以下假设的，简化的clojurescript片段：

(def cat (r/atom [{:id 0 :data {:text "ROOT" :test 17} :prev nil :par nil}
                 {:id 1 :data {:text "Objects" :test 27} :prev nil :par 0}
                 {:id 2 :data {:text "Version" :test 37} :prev nil :par 1}]))

(defn categorymanager [s]
  [:div
   [:> Reactable.Table
    {:data (clj->js
             s
             )}
    ]
   ]
  )

(defn content []
   (fn []
     [:div
     [:h1 "Test"]
     (categorymanager (select [ALL :data] (t/tree-visitor @cat)))
     [re-com/button :label "Do not click!"]
     ]
))

内容功能准备试剂组件。代码段按预期工作。（＆＃39;选择＆＃39;功能是Spectre库的一部分。）

我想添加最小的重新帧代码，以便在更改cat原子时，例如使用REPL中的函数，更改浏览器中的React.js组件。我知道关于重新构建订阅和处理程序的理论，但仅在理论上，因为我还没有能够在这样一个最小的例子中使它工作。怎么做？如何使用Re-frame订阅和处理程序将更改推送到Reagent组件？

Answer 1

首先应该通过调度某种初始化程序来初始化重新构建app-db。重新框架与它的内部单个app-db一起使用。在安装顶级React组件之前，您可以使用dispatch-sync进行调度，这样应用程序将在初始化后呈现。

对于您的具体示例，它将是这样的（根本没有测试）：

; Initialize our db here. This one should be called with (re-frame/dispatch-sync [:initialize]) before rendering application.
(re-frame/register-handler
  :initialize
  (fn [_]
    {:cats [{:id 0 :data {:text "ROOT" :test 17} :prev nil :par nil}
            {:id 1 :data {:text "Objects" :test 27} :prev nil :par 0}
            {:id 2 :data {:text "Version" :test 37} :prev nil :par 1}]}))

; This one returns reaction with relevant cat list.
(re-frame/register-sub
  :cats
  (fn [db]
    (reaction
      (get @db :cats))))

(defn categorymanager [s]
  [:div
   [:> Reactable.Table
    {:data (clj->js
             s)}]])

(defn content []
  ; Here you subscribe to cat list. Once cat list is changed, component is rerendered.
  (let [cats (re-frame/subscribe [:cats])]
   (fn []
     [:div]
     [:h1 "Test"]
     (categorymanager (select [ALL :data] (t/tree-visitor @cats)))
     [re-com/button :label "Do not click!"])))

如何使用Re-frame订阅和处理程序将更改推送到Reagent组件？

1 个答案: