@slimlib/store NPM

Store

Proxy-based store for SPAs.

Simple
Relatively fast
Small size (less than 1Kb minified not gzipped)
Typescript support

Installation

Using npm:

npm install --save-dev @slimlib/store

Usage

React

import { createStore, useStore } from '@slimlib/store/react';

// create store
const [state, store] = createStore();

// action
function doSomething() {
    state.field = value;
}

//component
function Component() {
    const state = useStore(store);
    
    // use state
}

Preact

import { createStore, useStore } from '@slimlib/store/preact';

// create store
const [state, store] = createStore();

// action
function doSomething() {
    state.field = value;
}

//component
function Component() {
    const state = useStore(store);
    
    // use state
}

Svelte

In store

import { createStore } from '@slimlib/store/svelte';

// create store
const [state, subscribe] = createStore();

// action
export function doSomething() {
    state.field = value;
}

export default { subscribe };

In component

<script>
import { storeName } from './stores/storeName';
</script>

// use it in reactive way for reading data
$storeName

Angular

In store

import { SlimlibStore } from '@slimlib/store/angular';

// create store
@Injectable()
export class StoreName extends SlimlibStore<State> {
    constructor() {
        super(/*Initial state*/{ field: 123 }});
    }

    // selectors
    field = this.select(state => state.field);

    // actions
    doSomething() {
        this.state.field = value;
    }
}

rxjs

import { createStore, toObservable } from '@slimlib/store/rxjs';

// create store
const [state, store] = createStore();

// action
export function doSomething() {
    state.field = value;
}

// observable
export const state$ = toObservable(store);

API

`main` and `core` exports

`createStoreFactory(notifyAfterCreation: boolean)`

Returns createStore factory (see next) which notifies immediately after creating store if notifyAfterCreation is truthy.

`createStore<T>(initialState: T): [T, Store<T>, () => void]`

Store factory function that takes initial state and returns proxy object, store and function to notify subscribers. Proxy object meant to be left for actions implementations, store is for subscription for changes and notification only for some edge cases when an original object has been changed and listeners have to be notified.

`unwrapValue(value: T): T`

Unwraps a potential proxy object and returns a plain object if possible or value itself.

`Store<T>`

type StoreCallback<T> = (value: T) => void;
type UnsubscribeCallback = () => void;
interface Store<T> {
    (cb: StoreCallback<T>): UnsubscribeCallback;
    (): T;
}

Publish/subscribe/read pattern implementation. Meant to be used in components / services that want to subscribe for store changes.