Module @lauf/store

Lightweight Application Update Framework

@lauf/store provides a minimal reactive state-management solution. It can replace Redux, MobX, Xstate, Unstated, Constate in your app in the most delightful way.

Logo - Image of Runner

Logo - Diego Naive, Noun Project.

codecov

Install

npm install @lauf/store --save

@lauf/store is incredibly lightweight and suitable for adoption with almost any server-side or client-side framework in Typescript or Javascript.

Browse the API or see the minimal JS and TS examples inlined below without React or Async, showing the fundamentals of defining a new application state, tracking changes and making edits.

In Typescript

import { createStore, Immutable } from "@lauf/store";

// Define a type for Store state
export type AppState = Record<string, string>;

// Define the initial Store state
const INITIAL_STATE: Immutable<AppState> = {
roses: "red",
violets: "blue",
} as const;

// Create and initialize a store
const store = createStore(INITIAL_STATE);

// Watch for changes
store.watch(console.log);

// Change the color - this change will automatically call console.log in the next tick, producing
// { roses: 'white', violets: 'blue' }
store.write({
...store.read(),
roses: "white",
});

Because Store is defined as having an Immutable state, Typescript editors will automatically warn you if you fail to correctly follow Immutable Update patterns.

In Javascript

const { createStore } = require("@lauf/store");

// Create and initialize a store
const store = createStore({
roses: "red",
violets: "blue",
});

// Watch for changes
store.watch(console.log);

// Change the color - this change will automatically call console.log in the next tick, producing
// { roses: 'white', violets: 'blue' }
store.write({
...store.read(),
roses: "white",
});

It is recommended for Javascript coders to use @lauf/store-edit since their editor may not assist them in following Immutable Update patterns.

Editors and Selectors

Visit @lauf/store-edit to learn about edit() which eliminates the need to use Immutable Update patterns.

Visit @lauf/store-react to learn about useSelected() which can refresh React components when only a selected part of your state changes.

Index

Classes

Interfaces

Type Aliases

Functions

Generated using TypeDoc