diff --git a/examples/simple/project.clj b/examples/simple/project.clj index dea5d1c..2e63e5b 100644 --- a/examples/simple/project.clj +++ b/examples/simple/project.clj @@ -1,9 +1,9 @@ -(defproject simple-reagent "0.5.0-alpha3" +(defproject simple-re-frame "0.5.0-alpha3" :dependencies [[org.clojure/clojure "1.6.0"] [org.clojure/clojurescript "0.0-2816"] [reagent "0.5.0-alpha3"] - [re-frame "0.1.5"] + [re-frame "0.1.7"] [figwheel "0.2.3-SNAPSHOT"]] :plugins [[lein-cljsbuild "1.0.4"] diff --git a/examples/simple/src/simpleexample/core.cljs b/examples/simple/src/simpleexample/core.cljs index 8a5e1a4..71778b4 100644 --- a/examples/simple/src/simpleexample/core.cljs +++ b/examples/simple/src/simpleexample/core.cljs @@ -1,52 +1,54 @@ (ns simpleexample.core (:require-macros [reagent.ratom :refer [reaction]]) (:require [reagent.core :as reagent :refer [atom]] - [re-frame.handlers :as handlers] - [re-frame.subs :as subs] - [re-frame.handlers :refer [dispatch]])) + [re-frame.core :refer [register-handler + register-pure-handler + pure + register-subs + dispatch + subscribe]])) (defonce timer (atom (js/Date.))) (defonce time-updater (js/setInterval #(dispatch [:timer (js/Date.)]) 1000)) -;;; re-frame stuff -;;; add an initialize handler -;;; this will set the initial state +;;; this is the initial state (defonce initial-state {:timer (js/Date.) :time-color "#f34"}) -(handlers/register +;; Handlers +;------------------------------------------------------------- + +;; This handler sets the initial state +(register-pure-handler + ;; register-pure-handler is a convience macro that will be used 90% of the + ;; time + ;; the handler is passed a map (not an atom) and must return the new state + ;; of the db :initialize (fn [db _] - (swap! db merge initial-state))) + (merge db initial-state))) -;; add subscriptions to :timer and :time-color -(subs/register - :timer - (fn - [db _] - ;; you need to wrap your subscription code in a reaction - (reaction (:timer @db)))) - -(subs/register - :time-color - (fn - [db _] - ;; you need to wrap your subscription code in a reaction - (reaction (:time-color @db)))) - -(handlers/register +;; This handler changes the color of the displayed time +(register-handler + ;;; register-handler can take 3 arguments to allow you to insert middleware + ;;; see https://github.com/Day8/re-frame/wiki/Handler-Middleware :time-color + pure (fn ;; the first item in the second argument is :time-color the second is the ;; new value [db [_ value]] - (swap! db assoc :time-color value))) + (assoc db :time-color value))) -(handlers/register +;; This handler changes the value of the time +(register-handler + ;; This is a non-pure handler (NOT RECCOMENDED), no middleware is called + ;; and the app-db is passed directly as a atom. + ;; Note, there is no reason why this particular handler should not be pure :timer (fn ;; the first item in the second argument is :timer the second is the @@ -54,6 +56,21 @@ [db [_ value]] (swap! db assoc :timer value))) +;; add subscriptions to :timer and :time-color +(register-subs + :timer + (fn + [db _] + ;; you need to wrap your subscription code in a reaction + (reaction (:timer @db)))) + +(register-subs + :time-color + (fn + [db _] + ;; you need to wrap your subscription code in a reaction + (reaction (:time-color @db)))) + (dispatch [:initialize]) @@ -61,8 +78,8 @@ [:h1 message]) (defn clock [] - (let [time-color (subs/subscribe [:time-color]) - timer (subs/subscribe [:timer])] + (let [time-color (subscribe [:time-color]) + timer (subscribe [:timer])] ;;; wrap your component in a function to use the suscription (fn [] ;; note that the initialize call will not be dispatched immediately @@ -74,7 +91,7 @@ time-str]))))) (defn color-input [] - (let [time-color (subs/subscribe [:time-color])] + (let [time-color (subscribe [:time-color])] ;;; wrap your component in a function to use the suscription (fn [] [:div.color-input