API Reference

ฟังก์ชันหลักที่ global-rx-state ส่งออกและรูปแบบการคืนค่า.


สร้างสถานะ Rx

ถ้ามีอาร์กิวเมนต์หนึ่งตัวจะเป็น anonymous tuple mode และถ้าส่งชื่อจะเป็น named object mode. named mode รองรับการเรียกภายในคอมโพเนนต์.

ts
// 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" });

สร้างคู่สถานะ Rx

ใช้เมื่อชื่อถูกกำหนดใน runtime แต่ต้องการลำดับการคืนค่า tuple. storage option สามารถใช้ร่วมกับ named key.

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

createRxReducer / createRxReducerTuple

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

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

ค่า storage

RxStateStorage รวม alias ที่เข้ากันได้กับ persistence backend. sessionstorage และ sessionStorage ใช้ sessionStorage ของเบราว์เซอร์.

ts
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เลือก localForage driver ที่เป็นไปได้ตามลำดับ IndexedDB, WebSQL, localStorage. storage ที่ได้รับจาก API ค้นหาจะส่งคืนเป็น backend ที่เลือกจริงไม่ใช่ auto.

ยูทิลิตี้การจัดเก็บ

การจัดเก็บของ named state และ reducer สามารถตรวจสอบได้ด้วยยูทิลิตี้สามตัว

ts
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 จะส่งคืนตำแหน่งการจัดเก็บที่ตรวจสอบแล้วเสมอในรูปแบบอาร์เรย์

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

storageKey คือ item key ที่แท้จริง และ fullKey คือ key ทั้งหมดที่สามารถตรวจสอบได้จาก backend ที่เปิดเผย flat key หากมีชื่อเดียวกันในหลายการตั้งค่า storage จะมีการส่งคืนหลายรายการในผลลัพธ์ของ getRxStateStorageInfo

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

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

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