The store - a beautiful declarative world where “undefined” doesn’t exist

There are several cases where you’d like to access a property of an object that isn’t already set like in this simple code :

json
let a = {}
let c = a.b
console.log(c) // logs undefined
a.b = 1
console.log(c) // 😩 logs undefined

Not working first example

Obviously by just moving around one line of code in our first example, we can get this code to work.

json
let a = {}
a.b = 1
let c = a.b
console.log(c) // 🎉 logs 1
console.log(c) // 🎉 logs 1

Working first example

We see here one of the limits of imperative code : the same bits of computation will behave differently depending on the order/context they are run.

Even the most “reactive” UI frameworks ask you to register/define your data/store prior to calling it in your components.

Wouldn’t it be great for our component to just know the reference of the data it needs but don’t worry if it has yet been defined or not ?

This would enable to decouple completely the UI and the logic !

We are going to explore a way to write this simple code in a pure declarative way.

Let’s first try to solve the first example with simple Rxjs logic

json
const a = new BehaviorSubject({})
const c = new BehaviorSubject(null)
a.pipe(map(v => v.b)).subscribe(c)
console.log(c.value) // logs undefined
a.next({b:1})
console.log(c.value) // Tadaa ! 😁 logs 1

At Potions we created a Store class that enables

json
const $ = new Store()

$.a = {}
$.c = $.a.b

console.log($.c.value) // logs undefined
$.a = {b:1}
console.log($.c.value) // Tadaa ! 😁 logs 1

Store is a proxy of a BehaviorSubject where every property… is a store itself.

https://www.infoq.com/presentations/Null-References-The-Billion-Dollar-Mistake-Tony-Hoare/