reactjs - Clojurescript, Reagent: pass atoms down as inputs, or use as global variables? -


i'm writing clojurescript app, using reagent make components reactive.

i have simple question. should

  1. pass atoms inputs through components, or
  2. use atoms global variables , let them 'side-affect' components?

in tutorial use latter option, in trying keep functions pure opted former.

am correct in saying using them global variables (in addition being less verbose when defining component inputs) prevents re-rendering of whole parent components atom's state not used?

if make components accept atoms arguments, can make them more reusable , easier test.

this true if opt keeping entire application state in single atom, passing down child components using cursors.

;; setup single instance of global state (defonce app-state   (reagent/atom {:foo 0 :bar 0})  ;; define generic counter component knows ;; nothing global state (defn counter   [count]   [:div     [:button {:onclick #(swap! count inc) "+"]     [:span @count]])   ;; define counter components , give them access  ;; specific context within global state  (defn app    [state]    [counter (reagent/cursor app-state [:foo])]    [counter (reagent/cursor app-state [:bar])]) 

you can go 1 step further if decide use reagent re-frame. re-frame encourages build app specific architecture looks this.

 app-db  >  subscriptions    ^              handlers        v    ^               events  <  components 
  1. rather writing components , hooking them straight global atom (app-db), write subscriptions functions select/query data app-db , pass along components whenever app-db changed.

  2. then, rather component messing around app-db directly, component creates events small pieces of data describe intent of component.

  3. these events sent handlers, functions take event , current app-db arguments , return new app-db. existing app-db replaced, triggering subscribers pass data down components , on.

it's helpful if find reagent project getting bit tangled , re-frame readme great read, whether decide use or not.


Comments

Popular posts from this blog

sql - invalid in the select list because it is not contained in either an aggregate function -

Angularjs unit testing - ng-disabled not working when adding text to textarea -

How to start daemon on android by adb -