Search code examples
clojurescriptreagentre-frame

Can i store my app's content (reagent components) in the re-frame db?


Here is my app's structure:

(reg-event-db
  :app-surface-add-layer!
  (fn [db [_ layer-content & [layer-params]]]
      (assoc db :app-surface-layers
             (conj (:app-surface-layers db)
                   {:layer-content layer-content
                    :layer-params layer-params}))))

(reg-sub
  :app-surface-get-layers
  (fn [db _]
      (:app-surface-layers db)))

(defn x-app []
  (let [app-surface-layers (subscribe [:app-surface-get-layers])]
    (fn []
      [:div#app
       [:div#app-topbar "Menu-1, Menu-2, etc."]
       [:div#app-sidebar "Menu-3, Menu-4, etc."]
       [:div#app-surface
        (reduce
          (fn [app-surface layer-data]
              (conj app-surface
                    [(:layer-content layer-data) (:layer-params layer-data)]))
          [:div#app-surface-layers]
          @app-surface-layers)]])))

(defn calendar [params]
  [:div#calendar
   "Calendar"])

; Put the calendar component to the re-frame db
(dispatch [:app-surface-add-layer! #'calendar ["Param-1"]])

My question is, can i store my app's content component (like calendar in the example) in the re-frame db? What do you think about this solution's performace?


Solution

  • Can you? Absolutely, it's all just vectors in the end, and it certainly won't interfere with performance. Readability is a bit rough, I think it'd be clearer to have a case or similar to make it easier to tell in which situations calendar will be rendered vs a different component when trying to read the code, but a lot of that is going to depend on the specifics of what your doing.