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.
Type Name Latest commit message Commit time
Failed to load latest commit information.


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.


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) => {
    console.log('loading is set false');

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

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.loading = true;
/* output:
 * updated state: { loading: true }


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); = false;
/* output:
 * udpated state: { bar: false }
 * updated state: { foo: false }


  • 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.