status-im/reagent
2
0
Fork 0
mirror of https://github.com/status-im/reagent.git synced 2025-02-10 10:56:36 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #407 from cloojure/patch-7

Browse Source 
minor cleanup
This commit is contained in:
Juho Teperi 2018-12-09 11:09:05 +02:00 committed by GitHub
commit d28b16e11d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
doc/ManagingState.md
View File

@ -119,8 +119,8 @@ Cursors are created with `reagent/cursor`, which takes a ratom and a keypath (li
```clojure ```clojure
;; First create a ratom ;; First create a ratom
(def state (reagent/atom {:foo {:bar "BAR"} (def state (reagent/atom {:foo {:bar "BAR"}
:baz "BAZ" :baz "BAZ"
:quux "QUUX"})) :quux "QUUX"}))
;; Now create a cursor ;; Now create a cursor
(def bar-cursor (reagent/cursor state [:foo :bar])) (def bar-cursor (reagent/cursor state [:foo :bar]))
@ -167,7 +167,7 @@ When reactions produce a new result (as determined by `=`), they cause other dep
The function `make-reaction`, and its macro `reaction` are used to create a `Reaction`, which is a type that belongs to a number of protocols such as `IWatchable`, `IAtom`, `IReactiveAtom`, `IDeref`, `IReset`, `ISwap`, `IRunnable`, etc. which make it atom-like: ie it can be watched, derefed, reset, swapped on, and additionally, tracks its derefs, behave reactively, and so on. The function `make-reaction`, and its macro `reaction` are used to create a `Reaction`, which is a type that belongs to a number of protocols such as `IWatchable`, `IAtom`, `IReactiveAtom`, `IDeref`, `IReset`, `ISwap`, `IRunnable`, etc. which make it atom-like: ie it can be watched, derefed, reset, swapped on, and additionally, tracks its derefs, behave reactively, and so on.
Reactions are what give `r/atom`, `r/cursor`, and function `r/cursor` and `r/wrap` their power. Reactions are what give `r/atom`, `r/cursor`, and `r/wrap` their power.
`make-reaction` takes one argument, `f`, and an optional options map. The options map specifies what happens to `f`: `make-reaction` takes one argument, `f`, and an optional options map. The options map specifies what happens to `f`:
@ -177,29 +177,30 @@ Reactions are what give `r/atom`, `r/cursor`, and function `r/cursor` and `r/wra
Reactions are very useful when 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) * You need a way in which a component 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 * When you want to combine two `ratoms` and produce a result
* You want the component to use some transformed value of `ratom` * You want the component to use some transformed value of `ratom`
Here's an example: Here's an example:
``` ```
(def app-state (reagent/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}}))
(def app-var2-reaction (reagent.ratom/make-reaction (def app-var2a-reaction (reagent.ratom/make-reaction
#(get-in @app-state [:state-var-2 :var-a]))) #(get-in @app-state [:state-var-2 :var-a])))
(defn component-using-make-reaction [] (defn component-using-make-reaction []
[:div [:div
[:div "component-using-make-reaction"] [:div "component-using-make-reaction"]
[:div "Sate 2 - var a : " @app-var2-reaction]]) [:div "state-var-2 - var-a : " @app-var2a-reaction]])
``` ```
The below example uses `reagent.ratom/reaction` macro, which provides syntactic sugar around creating reaction using `make-reaction` The below example uses `reagent.ratom/reaction` macro, which provides syntactic sugar compared to
using plain `make-reaction`:
``` ```
(let [username (reagent/atom "") (let [username (reagent/atom "")
@ -221,8 +222,8 @@ Here's an example:
(ns example.core (ns example.core
(:require [reagent.core :as r])) (:require [reagent.core :as r]))
(defonce app-state (r/atom {:people (defonce app-state (r/atom {:people
{1 {:name "John Smith"} {1 {:name "John Smith"}
2 {:name "Maggie Johnson"}}})) 2 {:name "Maggie Johnson"}}}))
(defn people [] (defn people []
(:people @app-state)) (:people @app-state))