https://github.com/axtk/store

A lightweight shared state manager
https://github.com/axtk/store

shared-state store

Last synced: about 2 months ago
JSON representation

A lightweight shared state manager

• Host: GitHub
• URL: https://github.com/axtk/store
• Owner: axtk
• Created: 2020-09-04T00:00:44.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-12-04T22:57:47.000Z (about 3 years ago)
• Last Synced: 2024-10-04T15:39:15.214Z (3 months ago)
• Topics: shared-state, store
• Language: TypeScript
• Homepage:
• Size: 149 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![npm](https://img.shields.io/npm/v/@axtk/store?labelColor=royalblue&color=royalblue&style=flat-square)](https://www.npmjs.com/package/@axtk/store) [![GitHub](https://img.shields.io/badge/-GitHub-royalblue?labelColor=royalblue&color=royalblue&style=flat-square&logo=github)](https://github.com/axtk/store) ![browser](https://img.shields.io/badge/browser-✓-345?labelColor=345&color=345&style=flat-square) ![node](https://img.shields.io/badge/node-✓-345?labelColor=345&color=345&style=flat-square) ![TypeScript](https://img.shields.io/badge/TypeScript-✓-345?labelColor=345&color=345&style=flat-square)

# @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](https://github.com/axtk/react-store)* that adds a React hook for shared state management based on the `Store` class.

## Store API

### Initialization

```js

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

```js

store.setState({location: {x: 1, y: 0}});

```

```js

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

store.set(['location', 'x'], 1);

```

### Getters

```js

let state = store.getState();

```

```js

let location = store.get('location');

let y = store.get(['location', 'y']);

// With a default value:

let z = store.get(['location', 'z'], 0);

```

### Subscription

```js

let unsubscribe = store.onUpdate(store => {

    console.log('updated');

});

```

```js

unsubscribe(); // to remove the subscription

```

### Removal

```js

store.removeState();

```

```js

store.remove('location');

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

```