mirror of https://github.com/status-im/reagent.git
Use emit instead of dispatch
Shorter, and possibly less confusing.
This commit is contained in:
parent
1d912f0eaf
commit
e31c72670c
|
@ -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]
|
||||||
|
|
|
@ -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 React’s event handlers may
|
but using "[:code "swap!"]" in React’s 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
|
||||||
|
|
|
@ -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)]
|
||||||
|
|
Loading…
Reference in New Issue