Browse recipes

Inspect state with DevTools

Observe one counter through the bridge for its current state model.

Table of contents

APIs used

mount
Starts a Valyrian.js application on a DOM target.
createPulse
Creates one reactive value and returns `read()`, `write(...)` and `runSubscribers()`.
connectPulse
Bridges one pulse to Redux DevTools.

Run this recipe

Starting project
Use the local TSX and ESM project from Stage 1 with Valyrian.js installed and its ESM browser build configured.
File
Replace src/client-entry.tsx with this recipe snippet.
Run
Run npm run build, serve public with npx --yes serve@14.2.5 public --listen 8000, open http://localhost:8000 and use the example's visible controls.
Observable result
The application renders the pulse value and sends its changes to Redux DevTools when the extension is available.

Starting point

Start with a pulse counter that should remain usable with or without the inspection extension.

Steps

Connect the pulse to Redux DevTools, name the connection Count and render the reader from the wrapped tuple.

ts
import { mount } from "valyrian.js";
import { createPulse } from "valyrian.js/pulses";
import { connectPulse } from "valyrian.js/redux-devtools";

const count = connectPulse(createPulse(0), { name: "Count" });

mount("body", () => `Count: ${count[0]()}`);

Result

The application renders the pulse value and sends its changes to Redux DevTools when the extension is available.

Limits

When DevTools is unavailable, the connected pulse still returns its reader.

Continue