Framework-independent, writable, trackable store
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.
Usage
Track State
// 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 and Write State
// 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 OR Require
import { createStore } from "@lauf/store"; // for esm
const { createStore } = require("@lauf/store"); // for commonjs
Create a Store in Javascript
const store = createStore({ counter: 0 });
Create a Store In Typescript
interface CounterState {
counter: number;
}
const INITIAL_STATE = {
counter: 0,
} as const;
const store = createStore<CounterState>(INITIAL_STATE);
Getting Started
Install
npm install @lauf/store
Demonstration Apps
Our Example Counter Apps offer minimal demonstrations of @lauf/store
- Counter Apps using various Web Frameworks:
- with React (using @lauf/store-react)
- with no framework (using @lauf/store-follow)
- with Preact (using @lauf/store-react) and aliased React
- Counter Apps using various Bundling approaches:
- via Commonjs
- via ESM
- for tiniest bundle (a tree-shaken counter app in just 406 bytes!)
- Counter Apps demonstrating Tips and Tricks:
- Manage Immutability using editable drafts - eliminates Immutable update patterns
- Share a store with multiple components using React Context API - eliminates prop drilling