reconcile

Describes a new value for a store.

Describes a new value for a store. Passed to setStore, it changes only what differs from the current state: objects are merged key by key, arrays are matched by key so retained items keep their identity, and unchanged leaves are not written. Nothing is applied until setStore runs. Use it to apply fresh server data to a store without re-rendering what did not change.

Import#

import { reconcile } from "@shadow-js/core";

Signature#

function reconcile<T>(next: T, options?: ReconcileOptions): Reconciler<T>

Parameters#

Name	Description
`next`	The desired data. Store proxies are accepted and unwrapped.
`options`	Item identity (`key`) and whether to keep absent keys (`merge`). Undefined uses the defaults (`key: "id"`, `merge: false`).

Returns#

A reconciler to pass to setStore, alone or as the last argument of a path.

Throws#

TypeError (production message SHADOW_STORE_RECONCILE) when the returned reconciler is called directly instead of being passed to setStore. setStore throws TypeError (SHADOW_STORE_RECONCILE_SHAPE) when next is not the same kind of container (object or array) as the value it reconciles.

Examples#

import { reconcile, useStore } from "@shadow-js/core";

interface Todo { id: number; title: string; done: boolean }
const [todos, setTodos] = useStore({ items: [] as Todo[] });

async function refresh(): Promise<void> {
  const response = await fetch("/api/todos");
  setTodos("items", reconcile((await response.json()) as Todo[], { key: "id" }));
}