- Usage
[re-frame.core :as rf]
(defn app
[]
[:<>
[:> ThemeProvider {:theme cheffy-theme}
[:> Button {:variant "danger"} "click me"]]])
(defn ^:dev/after-load start
[]
; dispatch init db here, only use dispatch-sync for initial load, we want rest of dispatches to be async: rf/dispatch
(rf/dispatch-sync [:initialize-db])
(r/render [app]
(.getElementById js/document "app")))
; like Redux reducer, take :action-type return derived state
(rf/reg-event-db
:initialize-db
(fn [_ _]
initial-app-db))
#(rf/dispatch [:<event type> <params>])
reg-sub associates a query id with a function that computes that query, like this:
(rf/reg-sub
:some-query-id ;; query id (used later in subscribe)
a-query-fn) ;; the function which will compute the query
Later, a view function (domino 5) will subscribe to a query like this: (subscribe [:some-query-id]), and a-query-fn will be used to perform the query over the application state.
Each time application state changes, a-query-fn will be called again to compute a new materialised view (a new computation over app-db) and that new value will be given to all view functions which are subscribed to :some-query-id. These view functions will then be called to compute the new DOM state (because the views depend on query results which have changed).
Along this reactive chain of dependencies, re-frame will ensure the necessary calls are made, at the right time.
Here's the code:
(rf/reg-sub
:time
(fn [db _] ;; db is current app state. 2nd unused param is query vector
(:time db))) ;; return a query computation over the application state
(rf/reg-sub
:time-color
(fn [db _]
(:time-color db)))
- in console, log
re_frame.db.app_db.state