diff --git a/docs/Basic-App-Structure.md b/docs/Basic-App-Structure.md index eec305e..5958148 100644 --- a/docs/Basic-App-Structure.md +++ b/docs/Basic-App-Structure.md @@ -34,19 +34,19 @@ Assuming your larger apps has multiple "panels" (or "views") which are relativel ``` src -├── panel1 +├── panel-1 │ ├── db.cljs <--- schema, validation, etc (data layer) │ ├── subs.cljs <--- subscription handlers (query layer) │ ├── views.cljs <--- reagent components (view layer) │ └── events.cljs <--- event handlers (control/update layer) -├── panel2 +├── panel-2 │ ├── db.cljs <--- schema, validation. etc (data layer) │ ├── subs.cljs <--- subscription handlers (query layer) │ ├── views.cljs <--- reagent components (view layer) │ └── events.cljs <--- event handlers (control/update layer) . . -└── panelN +└── panel-n ``` Continue to [Navigation](Navigation.md) to learn how to switch between panels of a larger app. diff --git a/docs/Interceptors.md b/docs/Interceptors.md index 56e4ae0..1ce085b 100644 --- a/docs/Interceptors.md +++ b/docs/Interceptors.md @@ -119,7 +119,7 @@ and inserts its own interceptors so ACTUALLY, there's about 5 interceptors in the chain. So, ultimately, that event registration associates the event id `:some-id` -with a chain of interceptors. +with __just__ a chain of interceptors. Nothing more. Later, when a `(dispatch [:some-id ...])` happens, that 5-chain of interceptors will be "executed". And that's how events get handled. @@ -216,7 +216,7 @@ designed by the talented Dunno about you, but I'm easily offended by underscores. -If our components did this: +If we had a component which did this: ```clj (dispatch [:delete-item 42]) ``` diff --git a/docs/Loading-Initial-Data.md b/docs/Loading-Initial-Data.md index c88cb7f..cb04499 100644 --- a/docs/Loading-Initial-Data.md +++ b/docs/Loading-Initial-Data.md @@ -1,7 +1,11 @@ -## Bootstrapping Your Application State +## Bootstrapping Application State To bootstrap a re-frame application, you need to: - 1. register handlers (subscription and event handlers) + 1. register handlers + - subscription (via `reg-sub`) + - events (via `reg-event-db` or `reg-event-fx`) + - effects (via `reg-fx`) + - coeffects (via `reg-cofx`) 2. kickstart reagent (views) 3. Load the right initial data into `app-db` which might be a `merge` of: - Some default values @@ -11,23 +15,27 @@ To bootstrap a re-frame application, you need to: Point 3 is the interesting bit and will be the main focus of this page, but let's work our way through them ... -## Register Event Handlers +## 1. Register Handlers -Generally, there's nothing to do because this happens automatically at (js) script load time, because you declared and registered your event handlers like this: - - -```Clojure +re-frame's multifarious handlers all work in the same way. You declare +and registered your handlers in the one step, like this "event handler" example: +```clj (re-frame/reg-event-db ;; event handler will be registered automatically :some-id (fn [db [_ value]] - ... do some state change based on db and value + ... do some state change based on db and value )) ``` -## Kick Start Reagent +As a result, there's nothing further you need to do because +handler registration happens as a direct result of loading the code +code (presumably via a `