Comenzar

Instale el paquete y cree la primera tienda nombrada, luego elija el estilo de creación adecuado.

Instalación

bash

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

Tres estilos de creación

La forma más común es createRxStateusar la API de objeto nombrado. Al llamarlo con el mismo nombre, se apunta a la misma tienda global, por lo que se puede usar cómodamente dentro de los componentes de React. El nombre se calcula en tiempo de ejecución, pero si se necesita en forma de tupla createRxStateTupleuse esto, y si se deben agrupar las reglas de cambio de estado en acción/reductor. createRxReducerutilice.

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

Siguiente paso

Instalación

Verifique peerDependencies, rutas de importación y límites de paquete.

Inicio Rápido

Verifique el contador compartido, la clave de tiempo de ejecución y el ejemplo del reductor con el resultado en vivo.

Ir a Inicio Rápido