Clojurescript重帧订阅不起作用

Question

作为Clojure的新手，我正在尝试我的第一个重建框架的应用程序。它是一个包含部分的向导。每个部分可以包含一个或多个组件。每个组件都可以是文本块、数字输入……

但是，如果我通过分派set-component-value事件来更改REPL中组件的值，则不会重新呈现html以显示更新后的值。但是，我确实在re-frisk调试器中看到数据库得到了更新。

(re-frame/dispatch [:wiz-ev/set-component-value 0 0  "TEST"])

我可能犯了一些初学者的错误，但我看不出问题在哪里。

下面是重现该问题的精简版本(已编译)。

(ns wizard.core
  (:require
   [reagent.dom :as rdom]
   [day8.re-frame.tracing :refer-macros [fn-traced]]
   [re-frame.core :as re-frame]
   ))
;;
;; config
;;
(def debug?
  ^boolean goog.DEBUG)

;;
;; DB
;;

(def default-db
  {:wizard-config {
                   :title "title of wizard"
                   :sections[{:title "first section"
                              :components [{:title "first comp"}]}
                             {:title "second section"
                              :components[{:title "comp A"} {:title "comp B"}{:title "comp C"}]}

                             ]
                   }
   })

(defn create-empty-section-data
  "create a vector as placeholder for component data.  For each component we add a nil"
  [section]
  (reduce #(conj %1 nil) [] (:components section)));;

(defn add-wizard-data [db]
  "add a vector :wizard-data in db. For each section a new vector end for each component a nil in the vector"
  (let [sections (get-in db [:wizard-config :sections])
        data (reduce #(conj %1 (create-empty-section-data %2)) [] sections)]
    (assoc db :wizard-data data) ))

;;
;; events
;;
(re-frame/reg-event-db
  :wiz-ev/initialize-db
  (fn-traced [_ _]
    ( add-wizard-data default-db)))

(re-frame/reg-event-db
  :wiz-ev/set-component-value
  (fn-traced [db [_ section-number component-number new-value]]
             (let [old-wiz-data (:wizard-data db)
                   new-wiz-data (assoc-in old-wiz-data [section-number component-number] new-value)]
               (js/console.log "---:wiz-ev/set-component-value-------------------------------")
               (js/console.log new-value)
               (assoc db :wizard-data new-wiz-data))))
;;
;; subs
;;
(re-frame/reg-sub
 :wiz/config
 (fn[db] (:wizard-config db)) )

(re-frame/reg-sub
 :wiz/section-config
 (fn [_](re-frame/subscribe [:wiz/config]))
 (fn [wizard-config [_ section-number]]   ((:sections wizard-config) section-number)   ))

(re-frame/reg-sub
  :wiz/title
  (fn [_] (re-frame/subscribe [:wiz/config]))
  (fn [config _] (:title config)))

(re-frame/reg-sub
 :wiz/section-count
 (fn [_](re-frame/subscribe [:wiz/config]))
 (fn [config _] (count (:sections config))))


(re-frame/reg-sub
 :wiz/section-data
  (fn [db [_ section-number]] ((:wizard-data db) section-number)))

(re-frame/reg-sub
 :wiz/section-title
 (fn [[_ section-number]]  (re-frame/subscribe [:wiz/section-config section-number])  )
 (fn [section-config]   (:title section-config) ))

(re-frame/reg-sub
 :wiz/section-components
 (fn [[_ section-number]]  (re-frame/subscribe [:wiz/section-config section-number]))
 (fn [section-config _]   (:components section-config)) )

(re-frame/reg-sub
 :wiz/component-data
 (fn [[_ section-number]]
        (js/console.log "----[:wiz/component-data] section " (str section-number))
        (re-frame/subscribe [:wiz/section-data section-number])  )
 (fn [section_data [_  _ component-number]]
;;(fn [section_data [_ _ par2]]
;;(fn [par2]
(js/console.log "----[:wiz/component-data] comp funct, component=" (str component-number))
;;(js/console.log "----[:wiz/component-data] component " component-number " from section " sect-nbr)
;;   (section_data component-number)
   )
 )

;;
;; view
;;
(defn render-component
  [component component-number section-number]
  (let [
        value @(re-frame/subscribe [:wiz/component-data section-number component-number])]
  ;;(case (:type component)
  ;;  :text (render-component-text component component-number section-number)
  ;;  :memo (render-component-memo component component-number section-number)
  ;;  (render-component-default component)
  ;;  )
  [:div "The VALUE for component " component-number " (section" section-number") is : " value]
  )
)
(defn render-section
  [section-number]
  (let [title @(re-frame/subscribe [:wiz/section-title section-number])
        components @(re-frame/subscribe [:wiz/section-components section-number])]
    [:div
     [:h2 title]
     (into [:div] (map-indexed #(render-component %2 % section-number) components))]))

(defn main-panel []
  (let [wizard-title @(re-frame/subscribe [:wiz/title])
        section-count @(re-frame/subscribe [:wiz/section-count])
        ]

    [:div
     [:h1 wizard-title]
     (into [:<>] (map #(vector render-section %) (range section-count)))
     ]))


;;
;;core
;;
(defn dev-setup []
  (when debug?
    (println "*** dev mode ***")))

(defn ^:dev/after-load mount-root []
  (re-frame/clear-subscription-cache!)
  (let [root-el (.getElementById js/document "app")]
    (rdom/unmount-component-at-node root-el)
    (rdom/render [main-panel] root-el)))

(defn init []
  (re-frame/dispatch-sync [:wiz-ev/initialize-db])
  (dev-setup)
  (mount-root) ; render to element 'app' the view main-panel
  )

Answer 1

解决了，

首先，在调试component-data订阅时，我注释掉了太多

2、component-data的函数参数不正确

(re-frame/reg-sub
 :wiz/component-data
 (fn [[_ section-number _]] ;; ---- FIX NBR 2
        (js/console.log "----[:wiz/component-data] section " (str section-number))
        (re-frame/subscribe [:wiz/section-data section-number])  )
 (fn [section-data [_  _ component-number]]
(js/console.log "----[:wiz/component-data]" )
(js/console.log "component=" (str component-number))
(js/console.log "data " (str section-data))
   (section-data component-number) ;; ---- FIX NBR 1
   )
 )