reactivity-store

Why RStore?

• Direct Mutation - No setState, just mutate and UI updates automatically
• Vue Reactivity - Use ref(), reactive(), computed() from @vue/reactivity
• Zustand-like API - Clean, minimal API design
• Built-in Middleware - Persist, actions, Redux DevTools out of the box
• TypeScript First - Full type safety and excellent IntelliSense
• Zero Boilerplate - No reducers, no dispatch, no manual subscriptions

Installation

npm install reactivity-store
# or
pnpm add reactivity-store

Quick Start

Vue Approach

For Vue developers or those wanting fine-grained reactivity:

import { createStore, ref, computed } from "reactivity-store";

const useCounter = createStore(() => {
  const count = ref(0);
  const doubled = computed(() => count.value * 2);

  const increment = () => count.value++; // Direct mutation!

  return { count, doubled, increment };
});

function App() {
  const { count, doubled, increment } = useCounter();
  return (
    <div>
      <p>Count: {count}</p>
      <p>Doubled: {doubled}</p>
      <button onClick={increment}>+1</button>
    </div>
  );
}

React Approach

For React developers who want simplicity without learning Vue APIs:

import { createState } from "reactivity-store";

const useCounter = createState(() => ({ count: 0 }), {
  withActions: (state) => ({
    increment: () => state.count++,
    decrement: () => state.count--,
  }),
});

function App() {
  const { count, increment, decrement } = useCounter();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  );
}

Two Approaches, One Library

Built-in Middleware

Persistent State

const useSettings = createState(() => ({ theme: "light", language: "en" }), {
  withPersist: "app-settings", // Auto-saves to localStorage
  withActions: (state) => ({
    setTheme: (theme) => (state.theme = theme),
  }),
});

Redux DevTools

const useCounter = createState(() => ({ count: 0 }), {
  withNamespace: "Counter", // Shows up in Redux DevTools
  withActions: (state) => ({
    increment: () => state.count++,
  }),
});

Performance Options

const useStore = createState(() => ({ nested: { count: 0 } }), {
  withDeepSelector: true, // Track nested changes (default: true)
  withStableSelector: false, // Stable selector for performance
  withActions: (state) => ({
    increment: () => state.nested.count++,
  }),
});

Advanced Features

Lifecycle Hooks

import { createStoreWithComponent, ref, onMounted, onUnmounted } from "reactivity-store";

const Timer = createStoreWithComponent({
  setup: () => {
    const seconds = ref(0);
    let timer;

    onMounted(() => {
      timer = setInterval(() => seconds.value++, 1000);
    });

    onUnmounted(() => {
      clearInterval(timer);
    });

    return { seconds };
  },
});

function App() {
  return <Timer>{({ seconds }) => <div>{seconds}s</div>}</Timer>;
}

Component-local Reactive State

import { useReactiveState } from "reactivity-store";

function TodoList() {
  const [state, setState] = useReactiveState({
    todos: [],
    filter: "all",
  });

  const addTodo = (text) => {
    setState((s) => {
      s.todos.push({ id: Date.now(), text, done: false });
    });
  };

  return <div>{/* ... */}</div>;
}

State Subscriptions

const useCounter = createState(() => ({ count: 0 }), { withActions: (s) => ({ increment: () => s.count++ }) });

// Subscribe anywhere in your app
useCounter.subscribe(
  (state) => state.count,
  () => console.log("Count changed:", useCounter.getReadonlyState().count)
);

Comparison

const [count, setCount] = useState(0);

setCount((prev) => prev + 1);

const count = ref(0);

count.value++;

const useCount = createState(() => ({ count: 0 }), {
  withActions: (s) => ({
    increment: () => s.count++,
  }),
});

API Overview

Documentation

Visit https://mrwangjusttodo.github.io/r-store/ for complete documentation:

• What is RStore?
• Why RStore?
• Vue Approach - createStore
• React Approach - createState
• Lifecycle Hooks
• Use Cases

License

MIT MrWangJustToDo