Skip to content

cjkoepke/proxy-state

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
dev
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Proxy-State

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.

Usage

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:

  1. An object representing your default state.
  2. Whether to use debugging mode or not.

Options

defaultState: {}

This is the default object to use as your state.

debug: false

Turn this on to allow helpful console logging.

Methods

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.

Roadmap

  1. Polyfill IE support.
  2. Allow listening to deeper object-tree value updates.