Início Rápido

Verifique o conteúdo principal da página de início com exemplos que funcionam.

1. Instalação

Hooks de divisão / arrastarusa React hook e RxJS BehaviorSubjectEntão o app precisa de react, rxjsestar presente.

bash

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

2. Compartilhar store com o mesmo nome

O modo nomeado é projetado para ser chamado facilmente dentro do componente. Chamando com o mesmo nome criarEstadoRxretorna o mesmo store global. Se o próximo valor depender do valor anterior, setValue((prev) => next) use um setter funcional do tipo.

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. Use createRxStateTuple se precisar de uma chave de tempo de execução

Quando o nome é determinado em tempo de execução, como o id do workspace recebido do servidor, parâmetro de rota ou nome da aba clicada, criarTuplaEstadoRxisso é natural. O exemplo abaixo usa stores de rascunho diferentes para cada aba.

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. Reunir regras de alteração com redutor

Valores simples são suficientes com um setter, mas se o estado mudar com base em várias ações ou se os valores dependerem entre si, criarRedutorRxé mais seguro reunir as regras de alteração em um só lugar.

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