Improve subscriptions docs

This commit is contained in:
Mike Thompson 2016-12-19 09:42:16 +11:00
parent 4669f6824b
commit c76e299341
2 changed files with 50 additions and 44 deletions

View File

@ -60,7 +60,56 @@ Which, in turn, means we must write this `time-str` subscription handler:
Much better.
You'll notice this new subscription handler belongs to the "Level 3"
layer of the reactive flow. See the [Infographic](SubscriptionInfographic.md).
layer of the reactive flow. See the [Infographic](SubscriptionInfographic.md).
### Another technique
Above I suggested this:
```clj
(defn clock
[]
[:div.example-clock
{:style {:color @(rf/subscribe [:time-color])}}
@(rf/subscribe [:time-str])])
```
That may offend your aesthetics. Too much noise with those `@`?
How about we define a `listen` function to clean it up.
```clj
(defn listen
[query-v]
@(rf/subscribe v))
```
Then we can re-write like this:
```clj
(defn clock
[]
[:div.example-clock
{:style {:color (listen [:time-color])}}
(listen [:time-str])])
```
At the cost of your own function, `listen`, the code is slightly less noisy
AND there's less chance of forgetting an `@` (which can lead to odd problems).
### Say It Again
If, in code review, you saw this view function:
```clj
(defn show-items
[]
(let [sorted-items (sort @(subscribe [:items]))]
(into [:div] (for [i sorted-items] [item-view i]))))
```
What would you object to?
That `sort`, right? Computation in the view. Instead we want the right data
delivered to the view - its job is to simply make `hiccup`.
The solution is to create a subscription that delivers sorted
items.
***

View File

@ -490,46 +490,3 @@ Back to the more pragmatic world ...
[Pedestal App]:https://github.com/pedestal/pedestal-app
-----------------
## Prefer Dumb Views - Part 1
Many events are dispatched by the DOM in response to user actions.
For example, a button view might be like this:
```clj
(defn yes-button
[]
[:div {:class "button-class"
:on-click #(dispatch [:yes-button-clicked])}
"Yes"])
```
Notice that `on-click` DOM handler:
```clj
#(dispatch [:yes-button-clicked])
```
With re-frame, we want the DOM as passive as possible. We do
not want our views containing any imperative control logic.
All of that should be computed by event handlers.
We want that "on-click" as simple as we can make it.
**Rule**: `views` are as passive and minimal as possible when it
comes to handling events. They `dispatch` pure data and nothing more.
## Prefer Dumb Views - Part 2
Neither do we want views computing the data they render.
That's the job of a subscription:
So this is bad:
```clj
(defn show-items
[]
(let [sorted-items (sort @(subscribe [:items]))] ;; <--
(into [:div] (for [i sorted-items] [item-view i]))))
```
The view is not simply taking the data supplied by the