490 gzipped bytes of powerful state-management!
Read the API Reference or the reference usages below.
A Store maintains a protected reference to an Immutable array or object state
. It brokers all changes to state
, enabling app interfaces and business logic to track modifications through Selectors.
It is incredibly simple, lightweight and framework-independent, and therefore suited to manage state within almost any server-side or client-side Typescript or Javascript project.
// using a watcher
store.watch((state) => console.dir(state));
// using a selector and a memoizing React Hook
import { useSelected } from "@lauf/store-react";
const counter = useSelected(store, (state) => state.counter);
// using a selector and a memoizing event queue (framework independent)
import { followSelector } from "@lauf/store-follow";
followSelector(
store,
(state) => state.counter,
(counter, { exit }) => {
console.log(`Counter is ${counter}`);
if (counter > 10) return exit(counter);
}
);
// read state
const state = store.read();
// write state using immutable patterns
store.write({
...state,
counter: state.counter + 1,
});
// write state using drafted state object
import { edit } from "@lauf/store-edit";
edit(store, (draft) => (draft.counter += 1));
import { createStore } from "@lauf/store"; // for esm
const { createStore } = require("@lauf/store"); // for commonjs
const store = createStore({ counter: 0 });
interface CounterState {
counter: number;
}
const INITIAL_STATE = {
counter: 0,
} as const;
const store = createStore<CounterState>(INITIAL_STATE);
npm install @lauf/store
Our Example Counter Apps offer minimal demonstrations of @lauf/store
Generated using TypeDoc