Démarrage rapide

Vérifiez le contenu clé de la page de démarrage avec un exemple fonctionnel.

1. Installation

Hooks de division / de glissementutilise React hook et RxJS BehaviorSubjectDonc, l'application doit avoir réagir, rxjsinstallé.

bash

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

2. Partager le store avec le même nom

Le mode nommé est conçu pour être facilement appelé à l'intérieur des composants. En appelant avec le même nom, createRxStateil renvoie le même store global. Si la valeur suivante dépend de la valeur précédente, setValue((prev) => next) utilisez un setter fonctionnel de type.

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. Utilisez createRxStateTuple si une clé d'exécution est nécessaire

Lorsque le nom est déterminé à l'exécution, comme l'id de l'espace de travail reçu du serveur, le paramètre de route, ou le nom de l'onglet cliqué, createRxStateTuplec'est naturel. L'exemple ci-dessous utilise un store de brouillon différent pour chaque onglet.

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. Regroupez les règles de changement avec un réducteur

Une valeur simple suffit avec un setter, mais si l'état change selon plusieurs actions ou si les valeurs dépendent les unes des autres, createRxReduceril est plus sûr de regrouper les règles de changement à un seul endroit.

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