Create an immutable state atom. Forms the basis for hot reloading, infinite undo / redo (time-travel) and more.
$ npm install state-atom
const atom = require('state-atom')
const array = atom.array
const value = atom.value
const state = atom({
foo: array([ value('bin'), value('baz') ]),
bar: array([ value('beep'), value('boop') ])
})
state((curr) => {
console.log(curr.foo)
// => [ 'bin', 'baz' ]
console.log(curr.bar)
// => [ 'beep', 'boop' ]
})
Create a new immutable state atom from an object.
Register a handler function that is called whenever state changes.
Access observ-struct.
Access observ-array.
Access observ-varhash.
Access observ.
A state atom holds all the state of your application, generally implemented as an object that holds several arrays. Think of it as the in-memory database of your application from where your ui components can query data.
I've always been annoyed by managing state; when refactoring it's a great slowdown. By having all state live in a single location you can do interesting things such as persist application state to local storage, dump full application state to debug, hot reload code and more!
Backend applications have both persistant state (database) and application
state (memory). state-atom takes this analogy and applies it to the
frontend. Changes saved to the atom are immutable, returning mutable copies
when read. Only when actively persisting the state back to the atom will
listeners fire and changes propagate throughout the application.
Shout out to Raynos for creating Mercury and its dependencies of which this package makes heavy use. The original version of this package was extracted from Mercury.