JavaScript stores for devs who like stores.

store.md

Arbitrary Values

export function createStore(state) {
  const listeners = new Set();

  return {
    get() {
      return state;
    },

    set(next) {
      state = typeof next === 'function'
        ? next(state)
        : next;

      return new Promise((resolve) => {
        listeners.forEach((fn) => fn(state));
        resolve();
      });
    },

    subscribe(fn, { immediate } = {}) {
      listeners.add(fn);

      if (immediate) {
        fn(state);
      }

      return () => {
        listeners.delete(fn);
      };
    },
  };
}

Objects

export function createStore(state) {
  const listeners = new Set();

  return {
    get() {
      return state;
    },

    set(patch) {
      const prev = state;
      const next = { ...prev, ...patch };

      state = next;

      listeners.forEach((fn) => {
        fn(next, prev);
      });
    },

    subscribe(fn, immediate = true) {
      listeners.add(fn);

      if (immediate) {
        fn(state);
      }

      return () => {
        listeners.delete(fn);
      };
    },
  };
}

Classes

class Store {
  constructor(initialState) {
    this.listeners = new Set();
    this.state = initialState;
  }

  set(patch) {
    const prev = this.state;
    const next = { ...prev, ...patch };

    this.state = next;

    this.listeners.forEach((fn) => {
      fn(next, prev);
    });

    return this;
  }

  subscribe(fn, immediate = true) {
    this.listeners.add(fn);

    if (immediate) {
      fn(this.state);
    }

    return () => {
      this.listeners.delete(fn);
    };
  }
}

class AppStore extends Store {
  constructor() {
    super({
      foo: 'hello',
      bar: 'world',
    });
  }

  setFoo(foo) {
    this.set({ foo });
  }

  setBar(bar) {
    this.set({ bar });
  }
}

const appStore = new AppStore();

appStore.addListener(console.log);

appStore.setFoo('goodnight');