クイックスタート

スタートページの核心内容を実行可能な例とともに一度に確認します。

1. インストール

@byeolnaerim/global-rx-stateはReactフックとRxJS BehaviorSubjectを使用します。だからアプリには react, rxjsが必要です。

bash

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

2. 同じ名前でストアを共有する

Named modeはコンポーネント内部で簡単に呼び出せるように設計されています。同じ名前で createRxStateを呼び出すと同じグローバルストアが返されます。次の値が前の値に依存する場合は 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これが自然です。以下の例はタブごとに異なるドラフトストアを使用します。

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. 変更ルールがある場合はリデューサーでまとめる

単純な値はセッターで十分ですが、複数のアクションに応じて状態が変わったり値が互いに依存する場合は 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",
);