Official Plugins

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

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

Install

npm

npx jsr add @kin-store/plugins

pnpm

pnpm add jsr:@kin-store/plugins

deno

deno add jsr:@kin-store/plugins

Available plugins

Plugin	Description
broadcast	Syncs state across browser tabs with BroadcastChannel
devtools	Connects to the Redux DevTools Extension
history	Undo / redo / reset with snapshot history
immer	Writes reducers or set's updaters as Immer draft mutations
persist	Persists 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 { withPlugins } from "@kin-store/core";
import { history, immer, persist } from "@kin-store/plugins";

const store = withPlugins({ todos: [] as string[], count: 0 })
  .use("persist", persist({ key: "my-store" }))
  .use("history", history({ limit: 50 }))
  .use(immer({
    reducers: {
      add: (draft, text: string) => {
        draft.todos.push(text);
      },
    },
  }));

await store.persist.hydrate();
store.history.undo();
store.dispatch.add("hello"); // From the top-level inline plugin