Regras do Modo Tuple

O modo de tupla anônima é para exportação em nível de módulo e usa o helper de tupla nomeada para a chave de runtime.

O modo de tupla anônima é apenas para o nível superior do módulo.

createRxState(defaultValue)cria uma nova store a cada chamada. Portanto, deve ser criado uma vez no nível superior do módulo e exportado para uso. Este modo não aceita opções de armazenamento e não usa a stack trace como chave oculta.

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

Não crie uma store de tupla anônima dentro do componente.

Uma nova store pode ser criada a cada renderização do componente. Use o modo nomeado dentro do componente ou use o helper de tupla nomeada apenas quando a chave de runtime for necessária.

Use o helper de tupla nomeada para a chave de runtime.

criarTuplaEstadoRxé adequado para casos em que o nome não é previamente definido, como o id do workspace recebido do servidor, o nome da aba selecionada pelo usuário ou parâmetros de rota. A mesma chave de runtime reutiliza a mesma store, enquanto chaves diferentes usam stores diferentes.

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