stateq v2.0.1

Stateq - lightweight event driven data storage

Stateq is a lightweight data storage. It is centralized, immutable and event-driven. It introduces a data access layer to provide a decoupled state interface. It can be used as a global or local storage in any front-end application.

Creating a store with stateq(init = {}, config?)

The store can be created by importing the default value of the stateq package. It provides the possibility to set an initial state, and add some optional configurations. In the configuration, you have the ability to set:

• onEvent: (path, value, event) => void: a callback that is triggered on each event in the data storage.

import stateq from 'stateq';

const initialState = { counter: 1 };
const config = {
  onEvent: (path, value, type) => console.log(path, value, type)
};

const store = stateq(initialState, config);

Events

In total there are five different events that can be triggered on the data storage in stateq.

• get(path: string, def?: any): gives back the value for a given path in the store;
• set(path: string, value: any): sets the value for a given path in the store;
• update(path: string, fn: Function): uses a function to mutate the original value in the store, for a given path (e.g. store.update('counter', (c) => c + 1));
• remove(path: string): removes a value for a given path in the store;

You can also chain the events together in a transaction. The code below does invoke the onEvent in the configuration once for each event in the transaction.

// transaction example
import store from './store';

const { update, set } = store;

function transaction() {
  set('my.nested.object', 'value 1');
  update('my.other.nested.object', 'value 2');
  if (store.get('counter') > 10) set('counter', 0);
}
transaction();

Using the storage in React components

When combined with an observable or something like a pubsub, it can easily be used to as a React Hook. First, the store and pubsub need to be configured.

// store.js
import stateq from 'stateq';
import { pubbel } from 'pubbel';

export const pubsub = pubbel();
const config = { onEvent: (p, v) => pubsub.publish(p, v) };
export const store = stateq({}, config);

With the store and pubsub configured, a custom hook can be created.

// useStoreValue.js hook
import { useState, useRef } from 'react';
import { store, pubsub } from 'store';

export default function useStoreValue(path, def) {
  // function to force rerender
  const [, rerender] = useReducer((c) => c + 1, 0);
  const value = useRef(store.get(path, def));

  // subscription to the pubsub events for the store
  useEffect(() => {
    const removeSubscription = pubsub.subscribe(path, (v) => {
      value.current = v;
      rerender();
    });
    // remove subscription
    return () => removeSubscription();
  }, []);

  return value.current;
}