diff --git a/doc/ManagingState.md b/doc/ManagingState.md index 5d198dc..ac801f5 100644 --- a/doc/ManagingState.md +++ b/doc/ManagingState.md @@ -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 * `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: ``` - (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} :state-var-2 {:var-a 7 :var-b 9}})) @@ -187,12 +192,20 @@ Here's an example: (defn component-using-make-reaction [] - [:div#component-using-make-reaction - [:div>h3 "component-using-make-reaction"] + [:div + [:div "component-using-make-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. ## The track function