Mulai Cepat

Periksa inti halaman mulai dengan contoh yang benar-benar berjalan.

1. Instal

@byeolnaerim/global-rx-statemenggunakan React hook dan RxJS BehaviorSubjectJadi aplikasi harus memiliki react, rxjsbersama.

bash

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

2. Berbagi store dengan nama yang sama

Named mode dirancang agar mudah dipanggil di dalam komponen. Memanggil dengan nama yang sama createRxStateakan mengembalikan global store yang sama. Jika nilai berikut bergantung pada nilai sebelumnya, setValue((prev) => next) gunakan setter fungsional dalam bentuk.

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. Gunakan createRxStateTuple jika runtime key diperlukan

Ketika nama ditentukan pada runtime seperti workspace id yang diterima dari server, parameter rute, atau nama tab yang diklik pengguna, createRxStateTupleini menjadi alami. Contoh di bawah ini menggunakan draft store yang berbeda untuk setiap tab.

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. Kumpulkan aturan perubahan dengan reducer

Nilai sederhana cukup dengan setter, tetapi jika status berubah berdasarkan beberapa aksi atau nilai saling bergantung, createRxReducerlebih aman untuk mengumpulkan aturan perubahan di satu tempat.

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