Skip to content

Instantly share code, notes, and snippets.

@superstructor
Last active September 4, 2020 04:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save superstructor/dcecbada3b1197db7d10812e961605b4 to your computer and use it in GitHub Desktop.
Save superstructor/dcecbada3b1197db7d10812e961605b4 to your computer and use it in GitHub Desktop.
re-frame Maps vs Vectors

Data Structure

Vectors

[:find-primes {:n 100}]

Maps & Maps++

{:rf/event-id :find-primes :n 100}

Dispatch from View

Vectors

(dispatch [:find-primes {:n 100}])

Maps

(dispatch {::rf/event-id :find-primes
           :n           100})

Maps++

(dispatch :find-primes {:n 100})

Dispatch from Fx Handler

Vectors

{:dispatch [:find-primes {:n 100}]}

Or

{:fx [[:dispatch [:find-primes {:n 100}]]]}

Maps

{:dispatch {::rf/event-id :find-primes 
            :n           100}}

Or

{:fx [[:dispatch {::rf/event-id :find-primes
                  :n            100}]]}

Maps++

{:dispatch ???!!!}

Or maybe in :fx effect:

{:fx [[:dispatch :find-primes {:n 100}]]}

Recursive Dispatch from Fx Handler

Vectors

(rf/reg-event-fx
 :find-primes
 (fn [{:keys [db]} [_ {:keys [flushed? n] :or {flushed? false n 10}} :as event]]      
   (if-not flushed?
      ;; step 1 - 
     {:db        (assoc db :twirly true)
      :dispatch  ^:flush-dom (assoc-in event [1 :flushed?] true)}  ;; <-- adding to the map
      ;; step 2 - hog the CPU
     {:db (n-primes db n)})))

Or http-fx

(rf/reg-event-fx
  :fetch-list
  (fn [{:keys [db]} [_ {:keys [sort-by state] :or {sort-by "date" state "initial"}} :as event]]
    (case state
       :initial
       {:http-fx {:method :get
                  :url    "..."
                  :on-success (assoc-in event [1 :state] :succeeded)
                  :on-failure (assoc-in event [1 :state] :failed)}})))

Maps

(rf/reg-event-fx
 :find-primes
 (fn [{:keys [db]} {:keys [flushed? n] :or {flushed? false n 10} :as event}]      
   (if-not flushed?
      ;; step 1 - 
     {:db        (assoc db :twirly true)
      :dispatch  ^:flush-dom (assoc event :flushed? true)}  ;; <-- adding to the map
      ;; step 2 - hog the CPU
     {:db (n-primes db n)})))

Or http-fx

(rf/reg-event-fx
  :fetch-list
  (fn [{:keys [db]} {:keys [sort-by state] :or {sort-by "date" state "initial"} :as event}]
    (case state
       :initial
       {:http-fx {:method :get
                  :url    "..."
                  :on-success (assoc event :state :succeeded)
                  :on-failure (assoc event :state :failed)}})))

Layer-2 Subscription

Vectors

(subscribe [:list-of-things {:start-date "..." 
                             :end-date   "..."}])

Maps

(subscribe {:re-frame/query-id :list-of-things
            :start-date  "..."
            :end-date    "..."})

Maps++

(subscribe :list-of-things {:start-date "..."
                            :end-date   "..."})

Layer-3 Subscription

Vectors

(reg-sub
  :derived-list
  :<- [:list-of-things {:start-date "..."
                        :end-date   "..."}]
  (fn [[list-of-things] _]
    ...))

Maps

(reg-sub
  :derived-list
  :<- {:rf/query-id :list-of-things
       :start-date  "..."
       :end-date    "..."}
  (fn [[list-of-things] _]
    ...))

Maps++

(reg-sub
  :derived-list
  :<- :list-of-things {:start-date "..."
                       :end-date   "..."}
  (fn [[list-of-things] _]
    ...))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment