Tuple-Modus-Regeln

Der anonyme Tupelmodus ist für den Modul-Export und verwendet einen benannten Tupel-Helfer für den Laufzeit-Schlüssel.

Der anonyme Tupelmodus ist nur auf Modulebene.

createRxState(defaultValue)Er erstellt bei jedem Aufruf einen neuen Store. Daher sollte er einmal auf Modulebene erstellt und exportiert werden, nicht innerhalb von Funktionen oder Komponenten. Dieser Modus akzeptiert keine Speicheroption und verwendet keinen versteckten Schlüssel für den Stack-Trace.

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>
  );
}

Erstellen Sie keinen anonymen Tupel-Store innerhalb der Komponente.

Bei jedem Rendern der Komponente kann ein neuer Store erstellt werden. Verwenden Sie innerhalb der Komponente den benannten Modus oder den benannten Tupel-Helfer nur, wenn ein Laufzeit-Schlüssel erforderlich ist.

Verwenden Sie den benannten Tupel-Helfer für den Laufzeit-Schlüssel.

createRxStateTupleEr eignet sich für Fälle, in denen der Name wie die vom Server empfangene Workspace-ID, der vom Benutzer ausgewählte Tab-Name oder der Routenparameter nicht im Voraus festgelegt ist. Der gleiche Laufzeit-Schlüssel verwendet denselben Store, während ein anderer Schlüssel einen anderen Store verwendet.

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>
	);
}