n0th1ng-else / minimal-store

Minimalistic implementation of the reactive store pattern

minimal-store

Minimalistic implementation of the reactive store pattern

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

Badges

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);

minimal-store's Issues

Store design

Form basic design for reactive store capabilities

Cricleci Bot generates broken links

github comment does not make any sense at the moment