Categories
JavaScript Tools

Introducing Proxy-State

On a recent project, I needed to handle some global state and make sure a couple elements on the DOM responded reactively to any changes in that state.

The temptation to reach for a library or framework like React is all-to-tempting a lot of the time — while it’s easy and familiar, loading a giant framework like can be (and usually is) excessive.

In the end, I opted for building somewhat of a rigid solution with vanilla JS, and it was clear that future flexibility and any added side-effects to the global state would become heavy to manage.

Enter Proxy-State

To prevent this in the future, I built a lightweight package for managing global state and subscribing to its changes over time.

The underpinning of the package is the Proxy Object (hence the name), which allows setting custom behavior on normal operations. I won’t get into the details of the interface here, as Proxy-State acts as an abstraction layer on top to make things easier.

Currently, Proxy-State has no support for Internet Explorer. If you find a polyfill, I’d love to see it in the comments!

Using Proxy-State

Install the package via npm or yarn:

npm i proxy-state

In your main entry file, create a store with the following:

import Store from 'proxy-state'

const myStore = Store({
  count: 0
})

The default import of the package gives you a constructor function, which takes a single argument: an object representing your default state.

The constructor will return an object, with 4 properties:

state: {}

The current global state object.

listen: (fn( newState, oldState), ?key)

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.

detach: (key)

Removes a registered callback by its the key that was used to register it.

fetch: (key, ...rest)

Fetches an array of registered subscribers by their keys.

Summary

For now, you can only have one callback per key. I did this to force consideration of what is done within a listener, but I may allow more in the future.

That’s it! I would love to hear your thoughts or special use-cases that aren’t covered. This is in an initial version, but I hope it makes managing state a simpler experience for basic projects.

Leave a Reply

Your email address will not be published. Required fields are marked *