Skip to content
A simple function to create an observable object.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
src
.babelrc
.gitignore
.lintstagedrc
.npmignore
.prettierrc
README.md
package.json

README.md

observify

A simple function to create an observable object. You can implement observers, pub-subs, reducers and many other patterns with ease.

The function takes a target and return a proxy object, which you can subscribe to. On mutation including creation, deletion or change of any of its property, it will notify all the subscribers.

subscribers

The observable maintains a list of subscriber functions. It calls all the subscriber functions synchronously on any change to the target object. You can use ._subscribe() and ._unsubscribe() functions to add or remove subscribers to an observable respectively.

import { observify } from 'observify';

const target = {  
  loading: true,
};

const logger = state => {
  console.log('updated state: ', state);
};

/* you can pass an array of subcribers as a second 
 * argument to add them at initialization.
 */
const observable = observify(target, [logger]);

const updateUI = (state) => {
  if(!state.loading){
    console.log('loading is set false');
  }
};

/* you can use the ._subscribe() to add
 * subscribers to your observable.
observable._subscribe(updateUI);

observable.loading = false;
/* output:
 * updated state: { loading: false }
 * loading is set false
 */
 
observable.loading = false; 
/* no output, as on change the proxy does a deep 
 * equality check before notifying subscriber.
 */
 
/* you can use ._unsubscribe() to remove a
 * subscriber from the observable.
observable._unsubscribe(udpateUI);

observable.loading = true;
/* output:
 * updated state: { loading: true }
 */

dependency

An observable can be dependent on other observable. Which means if B is a dependency of A, A will notify all its subscribers if there is any change to B. You can use ._addDependency() and ._removeDependency() functions to add or remove dependency to an observable respectively.

Dependencies can be used to implement reducers. Check the example here.

import { observify } from 'observify';

const logger = state => {
  console.log('updated state: ', state;
};

const observableA = observify({
  foo: false,
}, [logger]);

const observableB = observify({
  bar: true,
}, [logger]);

observableA._addDependency(observableB);
observableB.bar = false;
/* output:
 * udpated state: { bar: false }
 * updated state: { foo: false }
 */

todo

  • Add option to configure deep, shallow or no check before notifying the subscribers.
  • Add option to freeze the proxy object.
  • Add option to call subscribers async.
You can’t perform that action at this time.