Function: connectReduxDevTools()#

function connectReduxDevTools(options?): IReduxDevToolsConnection;

Defined in: connectReduxDevTools.ts:89

Connect the Retree debug tap stream to the Redux DevTools Extension.

Parameters#

Returns#

IReduxDevToolsConnection

An IReduxDevToolsConnection; call dispose() to disconnect.

Remarks#

Every Retree emission becomes one extension action:

• A plain write sends "<rootName>/<nodeLabel>.<key>" (unnamed trees use "anonymous") with the change records in the payload.
• A Retree.runTransaction window sends a single "transaction" action whose payload lists the batched actions inside it.
• Writes inside Retree.runSilent(fn, false) are included (state changed even though application listeners were suppressed) and flagged payload.silent; fully-silent writes (default runSilent) never emit and are invisible here.
• A node leaving its tree sends "<rootName>/<nodeLabel>.removed". The node is already detached when the emission fires, so its root name is usually no longer resolvable and reports as "anonymous".

State shown in the extension is { [rootName]: state } for every inspected root — the roots passed via options.roots, or every root registered with Retree.registerRootName when omitted. Each action attaches a structuredClone of that state (see IReduxDevToolsOptions.stateSnapshots for the cost and the opt-out).

Time travel (Jump in the extension) is supported for JSON-representable state: the extension's state is reconciled into the inspected roots in one transaction, preserving node identities so listeners survive the jump. Map, Set, and Date values cannot round-trip through the extension's JSON serialization and keep their current contents (a dev warning reports the first skipped path).

When the extension is absent the call is a safe no-op: it returns a disconnected handle and logs one dev-mode console.info. Taps run synchronously inside the write path, so prefer connecting only in development builds.

Example#

import { Retree } from "@retreejs/core";
import { connectReduxDevTools } from "@retreejs/devtools";

const app = Retree.root({ count: 0 });
const connection = connectReduxDevTools({
    name: "My App",
    roots: { app },
});

app.count = 1; // action "app/Object.count" appears in the extension
// later
connection.dispose();