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.
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.
store.setState({location: {x: 1, y: 0}});
store.set('location', {x: -1, y: 1});
store.set(['location', 'x'], 1);
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);
let unsubscribe = store.onUpdate(store => {
console.log('updated');
});
unsubscribe(); // to remove the subscription
store.removeState();
store.remove('location');
store.remove(['location', 'y']);