Trivial example of @politie/sherlock.

sherlock-demo.ts

import { Atom, atom, Derivable, derivation, transact } from '@politie/sherlock';
import { List } from 'immutable';

// A simple pure function that returns a human-readable string from some data.
function createSentence(company: string, languages: string[], where: string): string {
    return `${company}, located in ${where}, likes to work with ${languages.join(', ')}.`;
}

// Atoms are ground state truths. They are Derivables which can be set or swapped.
const companyName: Atom<string> = atom('Open Web');
// A List is an immutable represenation of a list of values.
// See: https://facebook.github.io/immutable-js/docs/#/List
const preferredLanguages: Atom<List<string>> = atom(List(['Java', 'JavaScript']));
const location: Atom<string> = atom('Nieuwegein');

// The derivation function keeps track of all derivables and updates the internal state when any of
// the derivables changes.
const sentence: Derivable<string> = derivation(
    () => createSentence(companyName.get(), preferredLanguages.get().toArray(), location.get()),
);
// Note that this is also legal syntax, i.e. the first argument will be given the other arguments as
// parameters:
const otherSentence: Derivable<string> = derivation(
    createSentence,
    companyName,
    preferredLanguages.derive(l => l.toArray()), // the List has to be converted to a simple Array
    location
);

// A reaction will trigger its callback function whenever the derivation updates its internal state.
// Derivable#react returns a function that can be called to stop a reaction, for instance when an
// application component gets destroyed or a process terminated.
// This will log "Open Web, located in Nieuwegein, likes to work with Java, Javascript."
const done = sentence.react(s => console.log(s));

// Now we can alter state, and the reactor will log the derived value synchronously.
companyName.set('Other Company');
// "Other Company, located in Nieuwegein, likes to work with Java, Javascript."

preferredLanguages.swap(languages => languages.push('Clojure', 'Elm'));
// "Other Company, located in Nieuwegein, likes to work with Java, JavaScript, Clojure, Elm."

// transact will execute it's callback function and only update reactors when the transaction has finished.
transact(() => {
    location.set('San Francisco');
    preferredLanguages.swap(languages => languages.filter(v => v.startsWith('E')).map(l => l.toUpperCase()).toList());
});
// Will only log one time: "Other Company, located in San Francisco, likes to work with ELM".

// Avoid memory leaks: call reactor once to destroy reaction.
done();