Começar

Instale o pacote e crie o primeiro store nomeado, em seguida, escolha o estilo de criação apropriado.

Instalação

bash

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

Três estilos de criação

A maneira mais comum é criarEstadoRxusar a API de objeto nomeado. Como chama o mesmo nome, ele aponta para o mesmo store global, portanto, pode ser usado facilmente dentro dos componentes React. O nome é calculado em tempo de execução, mas se precisar de uma forma de tupla, criarTuplaEstadoRxuse e, se as regras de alteração de estado precisarem ser agrupadas em ação/reducer. criarRedutorRxUsar.

tsx

import {
  createRxState,
  createRxStateTuple,
  createRxReducer,
} from "@byeolnaerim/global-rx-state";

// 1. Named object mode
// 컴포넌트 내부에서 같은 name으로 호출해도 같은 store를 받습니다.
export function CounterButton() {
  const { setCount, useCount } = createRxState(0, "count");
  const count = useCount();

  return (
    <button onClick={() => setCount((prev) => prev + 1)}>
      {count}
    </button>
  );
}

// 2. Named tuple mode
// 서버에서 받은 workspaceId, 사용자가 선택한 tabName처럼
// store key가 runtime에 결정될 때 유용합니다.
export function useTabDraftState(tabName: string) {
  return createRxStateTuple(
    { title: "", content: "" },
    `tab-draft:${tabName}`,
    { storage: "auto" },
  );
}

// 3. Reducer mode
// 업데이트 규칙이 많거나 값들이 서로 의존하면 reducer로 모읍니다.
export function CartSummary() {
  const { dispatchCart, useCart } = createRxReducer(
    initialCart,
    cartReducer,
    "cart",
    { storage: "auto" },
  );
  const cart = useCart();

  return <div>{cart.items.length}</div>;
}

// 4. Anonymous tuple mode
// name이 없는 tuple store는 모듈 최상위에서만 만들고 export해서 사용합니다.
// 함수나 컴포넌트 내부에서 호출하지 마세요.
export const [setNoNameCount, getNoNameCount, useNoNameCount] =
  createRxState(0);

Próximo passo

Instalação

Verifique peerDependencies, caminhos de importação e limites de pacote.

Início Rápido

Verifique o contador compartilhado, chave de tempo de execução e exemplos de redutor com resultados ao vivo.

Ir para Início Rápido