@lauf/store
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    Lightweight Application State Management

    codecov

    Logo - Image of Runner

    Lauf Store

    Logo - Diego Naive, Noun Project.

    Install

    npm install @lauf/store --save
    

    @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.

    Framework-independent async bindings for @lauf/store are provided by @lauf/store-follow.

    React bindings for @lauf/store are provided by @lauf/store-react.

    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 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.edit((draft) => {
      draft.roses = "white";
    });

    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.edit((draft) => {
      draft.roses = "white";
    });

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

    Keywords

    none

    Install

    npm i @lauf/store

    DownloadsWeekly Downloads

    9

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    36.7 kB

    Total Files

    34

    Last publish

    Collaborators

    • cefn