Use emit instead of dispatch

Shorter, and possibly less confusing.
This commit is contained in:
Dan Holmsand 2016-04-30 14:55:04 +02:00
parent 1d912f0eaf
commit e31c72670c
3 changed files with 15 additions and 14 deletions

View File

@ -1,7 +1,7 @@
(ns reagentdemo.core (ns reagentdemo.core
(:require [reagent.core :as r] (:require [reagent.core :as r]
[clojure.string :as string] [clojure.string :as string]
[sitetools.core :as tools :refer [dispatch link]] [sitetools.core :as tools :refer [emit link]]
[reagentdemo.common :as common :refer [demo-component]] [reagentdemo.common :as common :refer [demo-component]]
[reagentdemo.intro :as intro] [reagentdemo.intro :as intro]
[reagentdemo.news :as news] [reagentdemo.news :as news]

View File

@ -92,7 +92,7 @@
{:name ""})) {:name ""}))
state)) state))
(defn dispatch [e] (defn emit [e]
;; (js/console.log "Handling event" (str e)) ;; (js/console.log "Handling event" (str e))
(r/rswap! app-state event-handler e)) (r/rswap! app-state event-handler e))
@ -100,16 +100,17 @@
(let [p @(r/track person id)] (let [p @(r/track person id)]
[:div [:div
[:input {:value (:name p) [:input {:value (:name p)
:on-change #(dispatch [:set-name id (.-target.value %)])}]])) :on-change #(emit [:set-name id (.-target.value %)])}]]))
(defn edit-fields [] (defn edit-fields []
(let [ids @(r/track person-keys)] (let [ids @(r/track person-keys)]
[:div [:div
[name-list]
(for [i ids] (for [i ids]
^{:key i} [name-edit i]) ^{:key i} [name-edit i])
[:input {:type 'button [:input {:type 'button
:value "Add person" :value "Add person"
:on-click #(dispatch [:add-person])}]])) :on-click #(emit [:add-person])}]]))
(defn cursor-example [] (defn cursor-example []
@ -307,11 +308,11 @@
[demo-component {:comp edit-fields [demo-component {:comp edit-fields
:src (s/src-of [:event-handler :src (s/src-of [:event-handler
:dispatch :emit
:name-edit :name-edit
:edit-fields])}] :edit-fields])}]
[:p "All events are passed through the "[:code "dispatch"]" [:p "All events are passed through the "[:code "emit"]"
function, consisting of a trivial application function, consisting of a trivial application
of "[:code "rswap!"]" and some optional logging. This is the of "[:code "rswap!"]" and some optional logging. This is the
only place where application state actually changes the rest only place where application state actually changes the rest
@ -323,7 +324,7 @@
vectors here, with an event name in the first position)."] vectors here, with an event name in the first position)."]
[:p "All the UI components have to do is then just to return [:p "All the UI components have to do is then just to return
some markup, and set up routing of events through the dispatch some markup, and set up routing of events through the "[:code "emit"]"
function. "] function. "]
[:p "This architecture basically divides the application into [:p "This architecture basically divides the application into
@ -339,8 +340,8 @@
the common "[:code "swap!"]" instead of "[:code "rswap!"]", the common "[:code "swap!"]" instead of "[:code "rswap!"]",
but using "[:code "swap!"]" in Reacts event handlers may but using "[:code "swap!"]" in Reacts event handlers may
trigger warnings due to unexpected return values, and may trigger warnings due to unexpected return values, and may
cause severe headaches if an event handler called by dispatch cause severe headaches if an event handler called by "[:code "emit"]"
itself dispatches a new event (that would result in lost itself emits a new event (that would result in lost
events, and much confusion)."] events, and much confusion)."]
[:p "For a more structured version of a similar approach, see [:p "For a more structured version of a similar approach, see

View File

@ -48,7 +48,7 @@
state) state)
(recur state [:set-page x])))) (recur state [:set-page x]))))
(defn dispatch [event] (defn emit [event]
;; (dbg event) ;; (dbg event)
(r/rswap! config demo-handler event)) (r/rswap! config demo-handler event))
@ -76,13 +76,13 @@
(string/replace #"/*$" "")))) (string/replace #"/*$" ""))))
(History.))) (History.)))
(evt/listen EventType.NAVIGATE #(when (.-isNavigation %) (evt/listen EventType.NAVIGATE #(when (.-isNavigation %)
(dispatch [:set-page (.-token %)]))) (emit [:set-page (.-token %)])))
(.setEnabled true)) (.setEnabled true))
(let [token (.getToken history) (let [token (.getToken history)
p (if (and page (not html5) (empty? token)) p (if (and page (not html5) (empty? token))
page page
token)] token)]
(dispatch [:set-page p]))))) (emit [:set-page p])))))
(defn to-relative [f] (defn to-relative [f]
(string/replace f #"^/" "")) (string/replace f #"^/" ""))
@ -94,7 +94,7 @@
[:a (assoc props [:a (assoc props
:href (-> props :href to-relative) :href (-> props :href to-relative)
:on-click #(do (.preventDefault %) :on-click #(do (.preventDefault %)
(dispatch [:goto-page (:href props)]))) (emit [:goto-page (:href props)])))
child]) child])
(defn main-content [] (defn main-content []
@ -129,7 +129,7 @@
[:script {:src main :type "text/javascript"}]]]))) [:script {:src main :type "text/javascript"}]]])))
(defn gen-page [page-path conf] (defn gen-page [page-path conf]
(dispatch [:set-page page-path]) (emit [:set-page page-path])
(let [conf (merge conf @config) (let [conf (merge conf @config)
b (:body conf) b (:body conf)
bhtml (r/render-component-to-string b)] bhtml (r/render-component-to-string b)]