APIリファレンス

global-rx-stateがエクスポートする主要な関数と返り値の形です。

createRxState

引数が1つの場合はanonymous tuple modeで、名前を渡すと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

名前がランタイムに決定されるが、tupleの返却順序が必要な場合に使用します。ストレージオプションは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}`,
  );

ストレージ値

RxStateStorageは永続性バックエンドと互換性のあるエイリアスを含みます。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;
}

自動はIndexedDB、WebSQL、localStorageの順で可能なlocalForageドライバーを選択します。照会APIのresolved storageにはautoではなく実際に選択されたバックエンドが返されます。

ストレージユーティリティ

Named stateとreducerのストレージは、それぞれ三つのユーティリティで確認できます。

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

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

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

hasRxStateは指定したストレージ設定に値があるか確認します。findRxStateStoragesは値が確認された実際のバックエンドを重複なく返し、getRxStateStorageInfoは確認された保存場所を常に配列で返します。

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

storageKeyは実際のアイテムキーで、fullKeyはフラットキーを公開するバックエンドで確認できる全体のキーです。同じ名前が複数のストレージ設定にある場合、getRxStateStorageInfoの結果にも複数の項目が返されます。

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

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

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

ストレージユーティリティ

同じキーを複数のストレージに保存し、三つのユーティリティの実際の返り値を確認します。