Inicio Rápido

Verifique el contenido clave de la página de inicio con ejemplos que se ejecutan realmente.

1. Instalación

@byeolnaerim/global-rx-stateusa React hook y RxJS BehaviorSubjectAsí que la aplicación necesita react, rxjsestar presente.

bash

npm install @byeolnaerim/global-rx-state rxjs react

2. Compartir tienda con el mismo nombre

El modo nombrado está diseñado para ser llamado cómodamente dentro del componente. Al llamar con el mismo nombre createRxStatedevuelve la misma tienda global. Si el siguiente valor depende del valor anterior, setValue((prev) => next) utilice un setter funcional en forma.

tsx

import { createRxState } from "@byeolnaerim/global-rx-state";

function CounterButtons() {
  const { setCountInner, useCountInner } = createRxState(
    0,
    "countInner",
    { storage: "localstorage" },
  );

  const countInner = useCountInner();

  return (
    <button onClick={() => setCountInner((prev) => prev + 1)}>
      {countInner}
    </button>
  );
}

function CounterDisplay() {
  const { useCountInner } = createRxState(0, "countInner", { storage: "localstorage" });
  const countInner = useCountInner();

  return <span>현재 count: {countInner}</span>;
}

3. Usar createRxStateTuple si se necesita una clave de tiempo de ejecución

Cuando el nombre se determina en tiempo de ejecución, como el id de espacio de trabajo recibido del servidor, el parámetro de ruta o el nombre de la pestaña que el usuario hizo clic, createRxStateTupleesto es natural. El siguiente ejemplo utiliza diferentes tiendas de borrador para cada pestaña.

tsx

import { createRxStateTuple } from "@byeolnaerim/global-rx-state";

function RuntimeTabDraftSample() {
	const [setActiveTab, , useActiveTab] = createRxStateTuple(
		"profile",
		"docsQuickActiveTab",
		{ storage: "sessionstorage" },
	);
	const activeTab = useActiveTab();
	const [setDraft, , useDraft] = createRxStateTuple(
		{ content: "" },
		`docsQuickDraft:${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((tabName) => (
						<Button
							key={tabName}
							variant={
								activeTab === tabName ? "contained" : "outlined"
							}
							onClick={() => setActiveTab(tabName)}
						>
							{tabName}
						</Button>
					))}
				</Stack>
				<TextField
					label={`${activeTab} draft`}
					value={draft.content}
					onChange={(event) =>
						setDraft({ content: event.target.value })
					}
					fullWidth
				/>
			</Stack>
		</Paper>
	);
}

4. Reunir reglas de cambio con un reductor

Un valor simple es suficiente con un setter, pero si el estado cambia según varias acciones o los valores dependen entre sí, createRxReduceres más seguro reunir las reglas de cambio en un solo lugar.

tsx

type TodoAction =
  | { type: "add"; text: string }
  | { type: "reset" };

function todoReducer(state: TodoState, action: TodoAction): TodoState {
  switch (action.type) {
    case "add":
      return { items: [...state.items, action.text] };
    case "reset":
      return { items: [] };
    default:
      return state;
  }
}

const { dispatchTodo, useTodo } = createRxReducer(
  { items: [] },
  todoReducer,
  "todo",
);