Schnellstart

Überprüfen Sie die Kerninhalte der Startseite mit einem funktionierenden Beispiel auf einmal.

1. Installation

@byeolnaerim/global-rx-stateverwendet React Hook und RxJS BehaviorSubjectfür die App. react, rxjsmuss vorhanden sein.

bash

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

2. Store mit demselben Namen teilen

Der benannte Modus ist so konzipiert, dass er innerhalb der Komponente bequem aufgerufen werden kann. Wenn Sie mit demselben Namen createRxStateaufrufen, erhalten Sie denselben globalen Store. Wenn der nächste Wert vom vorherigen abhängt, setValue((prev) => next) verwenden Sie einen funktionalen Setter.

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. Verwenden Sie createRxStateTuple, wenn ein Laufzeit-Schlüssel erforderlich ist

Wenn der Name zur Laufzeit bestimmt wird, wie die vom Server empfangene Workspace-ID, der Routenparameter oder der Name des Tabs, den der Benutzer angeklickt hat, createRxStateTupleist das natürlich. Das folgende Beispiel verwendet für jeden Tab einen anderen Entwurfs-Store.

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. Regeln für Änderungen im Reducer zusammenfassen

Einfache Werte sind mit einem Setter ausreichend, aber wenn sich der Zustand je nach mehreren Aktionen ändert oder Werte voneinander abhängen, createRxReducerist es sicherer, die Änderungsregeln an einem Ort zu bündeln.

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",
);