- Notifications
You must be signed in to change notification settings - Fork0
mfbx9da4/observable-state-tree
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
The below is a programming challenge I set myself on boxing day 2020. Give it a go! 🎄🦌
Build an observable state tree.
An observable state tree is a normal object except that listeners canbe bound to any subtree of the state tree.
Behaviour requirements:
- Modifying a subtree will notify all parent listeners.
- Modifying a sibling should not notify any siblings.
- Modifying a parent only notifies the children listeners, if the children have also changed.
Examples of the above requirements are given below.
consttree=createTree({a:{b:{c:1,d:1}}})// the tree behaves like a normal object e.gconsole.log(tree)// prints the object 👉 { a: { b: { c : 1, d: 1 }}}// we can setup listenersconstdestroyRoot=listen(tree,(root)=>console.log('root',root))// on initial setup prints the full tree 👉 root { a: { b: { c: 1, d: 1 }}}constdestroyA=listen(tree.a,(a)=>console.log('a',a))// 👉 a { b: { c: 1 }}constdestroyB=listen(tree.a.b,(b)=>console.log('b',b))// 👉 b { c: 1 }constdestroyC=listen(tree.a.b.c,(c)=>console.log('c',c))// 👉 c 1constdestroyD=listen(tree.a.b.d,(d)=>console.log('d',d))// 👉 d 1// should also support sending the prev valuedestroyRoot()// 👆 calling destroy, removes the listener// 🙋♂️// 1. Modifying a subtree will notify all parent listeners.// 2. Modifying a sibling should not notify any siblings.tree.a.b.c=2// 👉 a { b: { c: 2 }}// 👉 b { c: 2 }// 👉 c 2// a, b and c are fired but sibling d is not fired// 🙋♂️// 3. Modifying a parent only notifies the children listeners, if the children have also changed.tree.a={ ...tree.a}// 👉 a { b: { c: 2 }}// a is fired but b, c and d are not firedtree.a={e:1}// 👉 a { e: 1 }// 👉 b undefined// 👉 c undefined// 👉 d undefined// b, c and d have been deleted so they should be notified with undefined
Data structure will consist of two trees:
- State tree
- Listener tree
The state tree is a standard object which is nothing more than a nested javascript object.The listener tree is the tree of listeners.
Each node in the listener tree has:
- Children listeners
- Parent listeners
- Listener callbacks
Getting a particular path will just return that node of the state tree:
Setting a particular path with a value will:
- Update state tree
- Traverse parents and notify with new value
- Traverse listener children and notify with new value
Use proxies for dot notation.
Later in react.js, could be used like so
constuseStoreState=(selector)=>{const[state,setState]=useState()useEffect(()=>{constdestroy=listen(selector,setState)returndestroy})returnstate}
- Here is my implementation of theobservable state tree.
- I couldn't quite get the above API but I camepretty close by using proxies.
- See thereact example here.
- See therudimentary unit tests here.
About
An observable state tree is a normal object except that listeners can be bound to any subtree of the state tree.
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.