API Reference

global-rx-state가 export하는 주요 함수와 반환 형태입니다.

createRxState

인자가 하나이면 anonymous tuple mode이고, name을 넘기면 named object mode입니다. named mode는 컴포넌트 내부 호출을 지원합니다.

// 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

name이 runtime에 결정되지만 tuple 반환 순서가 필요한 경우 사용합니다. storage option은 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는 persistence backend와 호환 alias를 포함합니다. sessionstorage와 sessionStorage는 브라우저 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;
}

auto는 IndexedDB, WebSQL, localStorage 순서로 가능한 localForage driver를 선택합니다. 조회 API의 resolved storage에는 auto가 아니라 실제 선택된 backend가 반환됩니다.

Storage utilities

Named state와 reducer의 storage는 각각 세 가지 유틸리티로 확인할 수 있습니다.

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

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

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

hasRxState는 지정한 storage 설정에 값이 있는지 확인합니다. findRxStateStorages는 값이 확인된 실제 backend를 중복 없이 반환하고, getRxStateStorageInfo는 확인된 저장 위치를 항상 배열로 반환합니다.

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

storageKey는 실제 item key이고 fullKey는 flat key를 노출하는 backend에서 확인할 수 있는 전체 key입니다. 같은 name이 여러 storage 설정에 있으면 getRxStateStorageInfo 결과에도 여러 항목이 반환됩니다.

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

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

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

Storage Utilities

같은 key를 여러 storage에 저장하고 세 유틸리티의 실제 반환값을 확인합니다.