@lauf/lauf-store v0.1.0-beta.14

State Management for Javascript with Typescript support.

Lauf Store

Logo - Diego Naive, Noun Project.

@lauf/lauf-store provides a minimal reactive state-management solution, a simple substitute for Flux/Redux based on Immer.

It 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 Typescript example inlined below without React, showing how to define a new application state, track changes and make edits.

A React binding of @lauf/lauf-store is provided by the @lauf/lauf-store-react package.

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

// Define a type for Store state
export interface AppState {
  color: [number, number, number];
}

// Define the initial Store state
const INITIAL_STATE: Immutable<AppState> = {
  color: [0, 0, 0],
} as const;

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

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

// Change the color - this will automatically call console.log and print the modified app state
store.edit((draft) => {
  draft.color = [255, 0, 0];
});

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