Quy tắc Tuple Mode

Chế độ tuple ẩn danh là để xuất cấp module, và sử dụng trợ giúp tuple có tên cho khóa runtime.

Chế độ tuple ẩn danh chỉ dành cho cấp độ module.

createRxState(defaultValue)Tạo một store mới mỗi lần gọi. Do đó, cần tạo một lần ở cấp độ module và xuất ra để sử dụng, không phải bên trong hàm hoặc thành phần. Chế độ này không nhận tùy chọn lưu trữ và không sử dụng stack trace như một khóa ẩn.

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

Không tạo store tuple ẩn danh bên trong thành phần.

Một store mới có thể được tạo ra mỗi lần render thành phần. Sử dụng chế độ có tên bên trong thành phần, hoặc chỉ sử dụng trợ giúp tuple có tên khi cần khóa runtime.

Sử dụng trợ giúp tuple có tên cho khóa runtime.

tạoRxStateTuplePhù hợp cho các trường hợp như id workspace nhận từ server, tên tab người dùng chọn, hoặc tham số route mà tên chưa được xác định trước. Khóa runtime giống nhau sẽ tái sử dụng cùng một store, khóa khác sẽ sử dụng store khác.

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