status-im
/
reagent
mirror of https://github.com/status-im/reagent.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Document nit for the make reaction example and adds another example which uses the ratom/reaction macro

This commit is contained in:
Robin Nagpal 2018-08-02 08:35:10 -04:00
parent 821b9f917c
commit 9af9c2cd38
1 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
doc/ManagingState.md
View File

@ -175,9 +175,14 @@ Reactions are what give `r/atom`, `r/cursor`, and function `r/cursor` and `r/wra
* `on-set` and `on-dispose` are run when the reaction is set and unset from the DOM * `on-set` and `on-dispose` are run when the reaction is set and unset from the DOM
* `derefed` **TODO unclear** * `derefed` **TODO unclear**
Reactions are very useful when
* You need a way in which components only updates based on part of the ratom state. (reagent/cursor can also be used for this scenario)
* When you want to combine two `ratoms` and produce a result
* You want the component to use some transformed value of `ratom`
Here's an example: Here's an example:
``` ```
(def app-state (reagent.ratom/atom {:state-var-1 {:var-a 2 (def app-state (reagent/atom {:state-var-1 {:var-a 2
:var-b 3} :var-b 3}
:state-var-2 {:var-a 7 :state-var-2 {:var-a 7
:var-b 9}})) :var-b 9}}))
@ -187,12 +192,20 @@ Here's an example:
(defn component-using-make-reaction [] (defn component-using-make-reaction []
[:div#component-using-make-reaction [:div
[:div>h3 "component-using-make-reaction"] [:div "component-using-make-reaction"]
[:div "Sate 2 - var a : " @app-var2-reaction]]) [:div "Sate 2 - var a : " @app-var2-reaction]])
``` ```
The below example uses `reagent.ratom/reaction` macro, which provides syntactic sugar around creating reaction using `make-reaction`
```
(let [username (reagent/atom "")
password (reagent/atom "")
fields-populated? (reagent.ratom/reaction (every? not-empty [@username @password]))]
[:div "Is username and password populated ?" @fields-populated?])
```
Reactions are executed asynchronously, so be sure to call `flush` if you depend on reaction side effects. Reactions are executed asynchronously, so be sure to call `flush` if you depend on reaction side effects.
## The track function ## The track function