mirror of
https://github.com/status-im/re-frame.git
synced 2025-02-23 15:28:09 +00:00
Improve subscriptions docs
This commit is contained in:
parent
4669f6824b
commit
c76e299341
@ -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.
|
||||
|
||||
|
||||
***
|
||||
|
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user