Kin Store

Getting Started

Install

Core

For vanilla projects:

npm add @kintools/store-core

React

For React projects (@kintools/store-core is included):

npm add @kintools/store-react

Plugins

To add official plugins:

npm add @kintools/store-plugins

Quick start

Create a store, write plain functions, done:

import { createStore } from "@kintools/store-core";
 
type TodoState = { todos: string[]; status: "idle" | "loading" };
 
const store = createStore({ todos: [], status: "idle" } as TodoState);
 
function addTodo(text: string): void {
  store.merge((s) => ({ todos: [...s.todos, text] }));
}
 
addTodo("Buy groceries");
console.log(store.get());
// { todos: ['Buy groceries'], status: 'idle' }

When your app grows, move logic into the store with .use():

import { createStore } from "@kintools/store-core";
import { history, persist } from "@kintools/store-plugins";
 
const store = createStore({ todos: [], status: "idle" } as TodoState)
  .use("persist", persist({ key: "todos" }))
  .use("history", history())
  .use({
    addTodo(text: string): void {
      this.merge((s) => ({ todos: [...s.todos, text] }));
    },
  });
 
store.addTodo("Buy groceries");
store.history.undo();
await store.persist.hydrate();

Each .use() adds capability, not a nesting level. The store grows with you.

What's next