元組模式規則

匿名元組模式用於模組級別的導出，運行時鍵使用命名元組輔助器。

匿名元組模式僅限於模組頂層

createRxState(defaultValue)每次調用時都會創建新的存儲。因此，應在模組頂層創建一次並導出使用，而不是在函數或組件內部。此模式不接受存儲選項，也不使用隱藏鍵的堆棧跟蹤。

tsx

import { createRxState } from "@byeolnaerim/global-rx-state";

// Good: module top-level에서 한 번 생성합니다.
export const [setCount, getCount, useCount] = createRxState(0);

export function Counter() {
  const count = useCount();

  //Don't Do That: 컴포넌트나 함수 내부에서 anonymous tuple store를 만들지 마세요.
  //매 렌더마다 새 store가 만들어질 수 있습니다.
  //const [setCount, getCount, useCount] = createRxState(0);

  return (
    <button onClick={() => setCount((prev) => prev + 1)}>
      {count}
    </button>
  );
}

請勿在組件內部創建匿名元組存儲

每次組件渲染時可能會創建新的存儲。在組件內部，請使用命名模式，或僅在需要運行時鍵時使用命名元組輔助器。

運行時鍵使用命名元組輔助器

createRxStateTuple適用於從伺服器接收的工作區ID、用戶選擇的標籤名稱、路由參數等名稱未事先確定的情況。相同的運行時鍵重用相同的存儲，而不同的鍵使用不同的存儲。

tsx

function RuntimeKeySample() {
	const [setActiveTab, , useActiveTab] = createRxStateTuple(
		"profile",
		"docsRuntimeActiveTab",
		{ storage: "sessionstorage" },
	);
	const activeTab = useActiveTab();
	const [setDraft, , useDraft] = createRxStateTuple(
		{ title: "", content: "" },
		`docs-tab-draft:${activeTab}`,
		{ storage: "sessionstorage" },
	);
	const draft = useDraft();

	return (
		<Paper variant="outlined" sx={{ p: 2, borderRadius: 3 }}>
			<Stack spacing={1.5}>
				<Stack direction="row" spacing={1}>
					{["profile", "settings", "billing"].map((tab) => (
						<Button
							key={tab}
							variant={
								activeTab === tab ? "contained" : "outlined"
							}
							onClick={() => setActiveTab(tab)}
						>
							{tab}
						</Button>
					))}
				</Stack>
				<TextField
					label={`Draft for ${activeTab}`}
					value={draft.content}
					onChange={(event) =>
						setDraft((prev) => ({
							...prev,
							content: event.target.value,
						}))
					}
					fullWidth
				/>
			</Stack>
		</Paper>
	);
}