Règles du mode Tuple

Le mode tuple anonyme est destiné à l'exportation au niveau du module, et utilise un helper de tuple nommé pour la clé d'exécution.

Le mode tuple anonyme est uniquement au niveau supérieur du module.

createRxState(defaultValue)Crée un nouveau store à chaque appel. Il doit donc être créé une fois au niveau supérieur du module et exporté pour être utilisé. Ce mode ne prend pas d'option de stockage et n'utilise pas la trace de pile comme clé cachée.

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

Ne créez pas de store de tuple anonyme à l'intérieur du composant.

Un nouveau store peut être créé à chaque rendu du composant. Utilisez le mode nommé à l'intérieur du composant, ou le helper de tuple nommé uniquement lorsque la clé d'exécution est nécessaire.

Utilisez le helper de tuple nommé pour la clé d'exécution.

createRxStateTupleConvient lorsque le nom n'est pas prédéfini, comme l'ID de l'espace de travail reçu du serveur, le nom de l'onglet sélectionné par l'utilisateur ou le paramètre de route. La même clé d'exécution réutilise le même store, tandis qu'une clé différente utilise un autre store.

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