Reglas del modo Tuple

El modo de tupla anónima es para exportación a nivel de módulo y utiliza un helper de tupla nombrada para la clave de tiempo de ejecución.

El modo de tupla anónima es solo para el nivel superior del módulo.

createRxState(defaultValue)Crea una nueva tienda cada vez que se llama. Por lo tanto, debe crearse una vez en la parte superior del módulo y exportarse para su uso. Este modo no recibe opciones de almacenamiento y no utiliza la traza de pila como clave 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>
  );
}

No cree una tienda de tupla anónima dentro del componente.

Se puede crear una nueva tienda en cada renderizado del componente. Use el modo nombrado dentro del componente o el helper de tupla nombrada solo cuando sea necesaria una clave de tiempo de ejecución.

Use el helper de tupla nombrada para la clave de tiempo de ejecución.

createRxStateTupleEs adecuado para casos donde el nombre no está predefinido, como el id del espacio de trabajo recibido del servidor, el nombre de la pestaña seleccionada por el usuario o el parámetro de ruta. La misma clave de tiempo de ejecución reutiliza la misma tienda, y diferentes claves utilizan diferentes tiendas.

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