A lightweight storage for shared state


Keywords
store, shared state, shared-state
License
MIT
Install
npm install @axtk/store@3.0.2

Documentation

npm GitHub browser node TypeScript

@axtk/store

A lightweight storage for shared state

An instance of the Store class is a lightweight container for data, which:

  • exposes a set of methods to manipulate the stored data (like .set(keyPath, data), .get(keyPath)), and
  • allows for subscriptions to updates it receives (via .onUpdate(handler)).

As an example, instances of the Store class can be used as a storage for shared state in React applications. See also react-store that adds a React hook for shared state management based on the Store class.

Store API

Initialization

import {Store} from '@axtk/store';

const store = new Store();
// With an initial state:
// const store = new Store({location: {x: -1, y: 1}});

The setters and getters below make use of the key paths to access the nested values. With TypeScript, the key paths, the arguments, and the return values are automatically checked to match the type of the store state.

Setters

store.setState({location: {x: 1, y: 0}});
store.set('location', {x: -1, y: 1});
store.set(['location', 'x'], 1);

Getters

let state = store.getState();
let location = store.get('location');
let y = store.get(['location', 'y']);
// With a default value:
let z = store.get(['location', 'z'], 0);

Subscription

let unsubscribe = store.onUpdate(store => {
    console.log('updated');
});
unsubscribe(); // to remove the subscription

Removal

store.removeState();
store.remove('location');
store.remove(['location', 'y']);