Browse guides

Organize reactive state and its effects

Choose createPulseStore for named reactive commits or createMutableStore when public state must also accept direct writes.

The example calls named methods on both stores, performs one direct mutable-store write and uses createEffect to observe the state properties read during its latest run.

Table of contents

Main APIs

createPulseStore
Returns proxied state and named pulse methods that publish committed changes.
createMutableStore
Creates a mutable store with named pulse methods.
createEffect
Runs work in response to reactive dependencies.
ts
import { mount } from "valyrian.js";
import {
  createEffect,
  createMutableStore,
  createPulseStore,
} from "valyrian.js/pulses";

const counter = createPulseStore(
  { count: 0 },
  {
    increment(state, amount = 1) {
      state.count += amount;
    },
  },
);

const editor = createMutableStore(
  { mode: "draft" },
  {
    publish(state) {
      state.mode = "published";
    },
  },
);

const observed: string[] = [];
const dispose = createEffect(() => {
  observed.push(`${counter.state.count}:${editor.state.mode}`);
});

editor.state.mode = "editing";
counter.increment(2);
editor.publish();
await new Promise((resolve) => setTimeout(resolve, 0));

mount(
  "body",
  () =>
    `Count: ${counter.state.count}; mode: ${editor.state.mode}; effect: ${observed.join(" -> ")}`,
);
dispose();

Result

Store commits notify subscribers on the debounced store path. The effect runs immediately, runs again after the commits and stops after its disposer is called. A direct createMutableStore write changes the value without publishing by itself.

Exact references