快速開始

在開始頁面中一次性查看關鍵內容及其實際運行的範例。

1. 安裝

列表分頁 hooks使用 React hook 和 RxJS BehaviorSubject因此應用程序需要 react, rxjs一起使用。

bash

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

2. 共享相同名稱的 store

命名模式旨在方便在組件內部調用。使用相同名稱調用時， createRxState將返回相同的全局 store。如果下一個值依賴於前一個值， setValue((prev) => next) 請使用形式的功能設置器。

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. 如果需要運行時鍵，請使用 createRxStateTuple

當名稱在運行時決定，例如從伺服器接收的工作區 ID、路由參數或用戶點擊的選項卡名稱， createRxStateTuple這是自然的。以下範例為每個選項卡使用不同的草稿 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. 如果有變更規則，請通過 reducer 聚合

簡單值使用設置器即可，但如果狀態根據多個操作變更或值彼此依賴， createRxReducer將變更規則集中在一個地方會更安全。

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