Aturan Mode Tuple

Mode tuple anonim adalah untuk ekspor tingkat modul, dan menggunakan pembantu tuple bernama untuk kunci runtime.

Mode tuple anonim hanya untuk tingkat atas modul

createRxState(defaultValue)membuat store baru setiap kali dipanggil. Oleh karena itu, harus dibuat sekali di tingkat atas modul dan diekspor untuk digunakan. Mode ini tidak menerima opsi penyimpanan dan tidak menggunakan jejak tumpukan sebagai kunci tersembunyi.

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

Jangan buat store tuple anonim di dalam komponen

Store baru dapat dibuat setiap kali komponen dirender. Gunakan mode bernama di dalam komponen, atau hanya gunakan pembantu tuple bernama saat kunci runtime diperlukan.

Gunakan pembantu tuple bernama untuk kunci runtime

createRxStateTuplecocok untuk kasus di mana id workspace yang diterima dari server, nama tab yang dipilih pengguna, atau parameter rute tidak ditentukan sebelumnya. Kunci runtime yang sama akan menggunakan store yang sama, dan kunci yang berbeda akan menggunakan store yang berbeda.

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