- 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 can be 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.
The below code should be viewed as pseudocode to demonstrate the usage of the data structure. You may wish to tweak the API to be more ergonomic or practical as you see fit.
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 }}}// the return value is a function which destroys the listenerconstdestroyA=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.