Kin Store

Official Plugins

Official plugins for @kintools/store-core, published as @kintools/store-plugins.

To learn how to write your own plugin, see Writing Plugins.

Install

npm add @kintools/store-plugins (or your package manager's equivalent); see Getting Started for every package manager.

Available plugins

PluginDescription
broadcastSyncs state across browser tabs with BroadcastChannel
devtoolsConnects to the Redux DevTools Extension
historyUndo / redo / reset with snapshot history
immerWrites methods (and set) as Immer draft mutations
persistPersists state to localStorage (or any custom storage)

Usage pattern

All plugins are registered with .use(). Plugins can be top-level or namespaced. Namespaced plugins (like persist and history below) expose their methods under their namespace key:

import { createStore } from "@kintools/store-core";
import { history, immer, persist } from "@kintools/store-plugins";
 
const store = createStore({ todos: [] as string[], count: 0 })
  .use("persist", persist({ key: "my-store" }))
  .use("history", history({ limit: 50 }))
  .use(immer({
    add(text: string): void {
      this.set((draft) => {
        draft.todos.push(text);
      });
    },
  }));
 
await store.persist.hydrate();
store.history.undo();
store.add("hello"); // From the top-level inline plugin