Skip to content

n0th1ng-else/minimal-store

Repository files navigation

minimal-store

Minimalistic implementation of the reactive store pattern

  • 322 Bytes, according to size-limit
  • No dependencies
  • 100% test coverage
  • ES Module

Badges

circle ci

semantic release

npm version

tested with jest

codecov

Usage

There are differend kinds of store you can use:

  • writableStore
  • freezableStore
  • readableStore

All stores apply weak data i.e. you can use null (update with no value) to clear store value.

writableStore

writableStore as called - can be updated without any limit. You can update data all the time as you want to.

freezableStore

freezableStore reflects the second parameter while being initialized - it defines how many time you can update store. The default is once (=== 1).

readableStore

readableStore stores the initial value and never being updated.
All subscribers will be executed once with the value store contains.

Examples

  • Simple example:
import { writableStore } from 'minimal-store';

const pageSize = writableStore(20);

pageSize.subscribe(size => {
	// do something with _size_
	// subscription will be called with `size === 20`
	// then with `size === 21`
});

pageSize.update(oldValue => oldValue + 1);
  • readable store
import { readableStore } from 'minimal-store';

const pageSize = readableStore(20);

pageSize.subscribe(size => {
	// do something with _size_
});

pageSize.update(oldValue => {
	// pageSize will never be update as it is a readableStore
	// return value does not make any sense in this case
});
  • freezable store:
import { freezableStore } from 'minimal-store';

const freezeCount = 3;
const pageSize = freezableStore(20, freezeCount);

pageSize.subscribe(size => {
	// do something with _size_
});

pageSize.update(oldValue => {
	// pageSize will be updated first 3 times and then will be freezed
	const newValue = 21; // any value you want to return
	return newValue;
});
  • Promise-like update:
import { writableStore } from 'minimal-store';

const pageSize = writableStore(20);

pageSize.subscribe(size => {
	// do something with _size_
	// first time it receives `size === 20`
	// then `size === 100`
});

pageSize.update(oldValue => {
	// update function can be async!
	return Promise.resolve(100);
});
  • Handling update errors:
import { writableStore } from 'minimal-store';

const pageSize = writableStore(20);

pageSize.subscribe(size => {
	// do something with _size_
});

pageSize
	.update(oldValue => {
		// update function can be async!
		return Promise.reject(new Error('Something went wrong...'));
	})
	.catch(err => {
		// err.message === 'Something went wrong...'
	});
  • Use current value to update store:
import { writableStore } from 'minimal-store';

const pageSize = writableStore(20);

pageSize.subscribe(size => {
	// do something with _size_
});

pageSize.update(oldValue => {
	return oldValue + 10;
});
  • Store rely on weak data i.e. you always can pass null as a new value:
import { writableStore } from 'minimal-store';

const pageSize = writableStore(20);

pageSize.subscribe(size => {
	// do something with _size_
	// first time `size === 20`
	// next `size === null`
});

pageSize.update(oldValue => null);