Clojurescript 重新框架订阅不起作用

Question

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

但是如果我通过调度 set-component-value 事件更改 REPL 中组件的值，html 不会重新呈现以显示更新后的值。但是我确实在重新搜身调试器中看到数据库已更新。

(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

已解决，

1st，我在调试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
   )
 )

Clojurescript 重新框架订阅不起作用

Clojurescript re-frame subscriptions do not work

clojurescript

reagent

re-frame