@li3/store

Manage state and logic in one place.

What is a store?

Stores are a concept used in many different languages and frameworks.

In this library, a store is a place for adding methods and keeping track of state in one unit. Methods, sometimes called actions, can change the internal state of a store.

The internal state is stored as a Signal. To access that state, use selectors.

Usage

First declare a store in a module

// count-store.js
import { createStore } from '@li3/store';

export default createStore(
  { count: 0 },
  {
    add(state, amount) {
      state.count += amount;
    },
    remove(state, amount) {
      state.count -= amount;
    }
  }
);
Copy

Then import the store and dispatch actions:

import countStore from './count-store.js';

// it's safe to import the same store many times
const { select, store } = countStore;

store.add(10)
store.remove(5);

// counter is a computed value
const counter = select((s) => s.count);
Copy

Transactions

Stores can push multiple changes and run side effects within a single update cycle. That can be done with a .transaction() call in the store:

import countStore from './count-store.js';

const { store, transaction, events } = countStore;

events.addEventListener('commit', (state) => {...})

transaction(async () => {
  await store.increment(1);
  await store.increment(10);
  await store.decrement(5);
});
Copy

All intermediate states are not propagated to any selector. When all actions are completely dispatched, the state is pushed into the store and all computed values reflect the changes.