API Reference

Main functions and return types exported by global-rx-state.

createRxState

If there is one argument, it is anonymous tuple mode; if a name is passed, it is named object mode. Named mode supports calls inside components.

// Anonymous tuple mode: module top-level only
const [setCount, getCount, useCount, countSubject, countReady] =
  createRxState(0);

// Named object mode
const { setCount, getCount, useCount, countSubject, countReady } =
  createRxState(0, "count", { storage: "auto" });

createRxStateTuple

Used when the name is determined at runtime but the order of tuple return is needed. Storage option can be used with named key.

const [setDraft, getDraft, useDraft, draftSubject, draftReady] =
  createRxStateTuple(
    { content: "" },
    `draft:${tabName}`,
    { storage: "sessionstorage" },
  );

createRxReducer / createRxReducerTuple

const { dispatchCart, getCart, useCart, cartSubject, cartReady } =
  createRxReducer(initialCart, cartReducer, "cart", { storage: "auto" });

const [dispatchFilter, getFilter, useFilter] =
  createRxReducerTuple(
    initialFilterState,
    filterReducer,
    `workspace-filter:${workspaceId}`,
  );

storage values

RxStateStorage includes persistence backends and compatible aliases. sessionstorage and sessionStorage use the browser's sessionStorage.

type RxStateStorage =
  | "in-memory"
  | "auto"
  | "indexeddb"
  | "IndexedDB"
  | "websql"
  | "WebSQL"
  | "localstorage"
  | "localStorage"
  | "sessionstorage"
  | "sessionStorage";

type RxStateResolvedStorage =
  | "in-memory"
  | "indexeddb"
  | "websql"
  | "localstorage"
  | "sessionstorage";

interface RxStateStorageOptions {
  storage?: RxStateStorage;
  name?: string;
  storeName?: string;
  keyPrefix?: string;
}

autoselects the available localForage driver in the order of IndexedDB, WebSQL, and localStorage. The resolved storage of the lookup API returns the actual selected backend, not auto.

Storage utilities

You can check the storage of named state and reducer with three utilities each.

function hasRxState(
  name: string,
  storageOptions: RxStateStorageOptions,
): Promise<boolean>;

function findRxStateStorages(
  name: string,
): Promise<RxStateResolvedStorage[]>;

function getRxStateStorageInfo(
  name: string,
  storageOptions?: RxStateStorageOptions,
): Promise<RxStateStorageInfo[]>;

hasRxState checks if the specified storage configuration has a value. findRxStateStorages returns the actual backend with confirmed values without duplication, and getRxStateStorageInfo always returns the confirmed storage locations as an array.

interface RxStateStorageInfo {
  key: string;
  storageKey: string;
  fullKey: string;
  storage: RxStateResolvedStorage;
  name: string;
  storeName: string;
  keyPrefix: string;
}

storageKey is the actual item key, and fullKey is the complete key that can be checked in the backend exposing the flat key. If the same name exists in multiple storage configurations, multiple items will be returned in the getRxStateStorageInfo results.

function hasRxReducer(
  name: string,
  storageOptions: RxStateStorageOptions,
): Promise<boolean>;

function findRxReducerStorages(
  name: string,
): Promise<RxStateResolvedStorage[]>;

function getRxReducerStorageInfo(
  name: string,
  storageOptions?: RxStateStorageOptions,
): Promise<RxStateStorageInfo[]>;

Storage Utilities

Store the same key in multiple storages and check the actual return values of the three utilities.