Skip to main content
Version: v4.1

@rindo/store

Store is a lightweight shared state library by the rindo core team. It implements a simple key/value map that efficiently re-renders components when necessary.

  • Lightweight
  • Zero dependencies
  • Simple API, like a reactive Map
  • Best performance

Installation​

npm install @rindo/store --save-dev

Example​

store.ts:

import { createStore } from '@rindo/store';

const { state, onChange } = createStore({
clicks: 0,
seconds: 0,
squaredClicks: 0,
});

onChange('clicks', (value) => {
state.squaredClicks = value ** 2;
});

export default state;

component.tsx:

import { Component, h } from '@rindo/core';
import state from '../store';

@Component({
tag: 'app-profile',
})
export class AppProfile {
componentWillLoad() {
setInterval(() => state.seconds++, 1000);
}

render() {
return (
<div>
<p>
<MyGlobalCounter />
<p>
Seconds: {state.seconds}
<br />
Squared Clicks: {state.squaredClicks}
</p>
</p>
</div>
);
}
}

const MyGlobalCounter = () => {
return <button onClick={() => state.clicks++}>{state.clicks}</button>;
};

API​

createStore<T>(initialState)​

Create a new store with the given initial state. The type is inferred from initialState, or can be passed as the generic type T.

Returns a store object with the following properties.

store.state​

The state object is proxied, I.E. you can directly get and set properties and Store will automatically take care of component re-rendering when the state object is changed.

store.on(event, listener)​

Add a listener to the store for a certain action.

store.onChange(propName, listener)​

Add a listener that is called when a specific property changes.

store.get(propName)​

Get a property's value from the store.

store.set(propName, value)​

Set a property's value in the store.

store.reset()​

Reset the store to its initial state.

store.use(...subscriptions)​

Use the given subscriptions in the store. A subscription is an object that defines one or more of the properties get, set or reset.

Testing​

Like any global state library, state should be reset between each spec test. Use the dispose() API in the beforeEach hook.

import store from '../store';

beforeEach(() => {
store.dispose();
});