如何为Reagent组件编写解码器

Question

我有一些类似的试剂成分，它们可以以某种方式呈现给定的数字：

(defn plain-number [n]
  [:h1 n])

(defn pie-chart [n]
  (render-fancy-chart n))

还有一些(简化的)状态：

(def state (r/atom {:a 5 :b 10 :c 7}))

我知道如何编写一个组件，该组件可以访问该状态并使用其中一个组件呈现状态：

(def fetch-and-render-pie [k]
   (let [v (get @state k)]
     [pie-chart v]))

[fetch-and-render-pie :a] ; renders pie with 5

到现在为止还好。但这是耦合的，重复的。

目标是：

一个装饰师会很好，它可以获取一些状态并将其传递给孩子。其用法如下所示：

[fetch :a
  [pie-chart]]

可能的解决办法：

(defn fetch [k wrapped]
  (let [v (get @state k)]
    (conj wrapped v)))

这是可行的，但它扰乱了组件定义的向量，并且假定了许多包装好的组件的参数。但对连锁装潢师来说却失败了。

必须有一个聪明而有力的解决方案。有什么想法吗？

Answer 1

仅限于试剂，我们可以使用游标

(defn com-a [state]
  (fn []
    [:h1 @state]))

(defn fetch [db]
  (let [state (reagent/cursor db :k)] ; assume {:k "dd"}
    (fn []
      [com-a state])))

重框架

(re-frame/reg-sub
  :chart-data
  (fn [db [_ query]]
    (get-in db query)))

(defn com-a [state]
  (fn []
    [:h1 @state]))

(defn fetch [db]
  (let [state (re-frame/subscribe [:chart-data [:k]])]
    (fn []
      [com-a state])))