A lightweight utility for managing global state and performing side-effects when it changes.
The underpinning of the Proxy-State is the Proxy Object (hence the name). However, setting this up can be laborsome and time-consuming, so Proxy-State acts as an abstraction layer on top of native APIs to make things easier.
Currently, Proxy-State has no support for Internet Explorer.
Install the package via npm
or yarn
:
npm install @cjkoepke/proxy-state
In your main entry file, create a store with the following:
import Store from 'proxy-state'
const { state, listen, detach, fetch } = Store({
count: 0
}, true )
/**
* Update state directly. Subscribers to changes will get
* old and new state as parameters.
*/
state.count = 2;
/**
* Listen to all state changes.
*/
listen((newState, oldState) => {
// Do something.
})
/**
* Listen to state change for a specific property.
*/
listen((newState, oldState) => {
// Do something.
}, 'count' )
/**
* You can unsubscribe from listening to a properties changes
* by detaching a registered listener.
*/
detach('count')
The default import of the package gives you a constructor function, which takes two arguments:
- An object representing your default state.
- Whether to use debugging mode or not.
This is the default object to use as your state.
Turn this on to allow helpful console logging.
Applies a callback for when state changes. Optionally can pass a unique key
as a secondary argument to only run the callback when a property that matches the key
changes.
Removes a registered callback by its the key that was used to register it.
Fetches an array of registered subscribers by their keys.
- Polyfill IE support.
- Allow listening to deeper object-tree value updates.