Управление состоянием: локальное, Context, Zustand и серверное

export type Category = "all" | "coffee" | "tea";
export type Product = { id: string; name: string; category: Exclude<Category, "all">; price: number };

export const PRODUCTS: Product[] = [
  { id: "latte", name: "Latte", category: "coffee", price: 1500 },
  { id: "espresso", name: "Espresso", category: "coffee", price: 900 },
  { id: "matcha", name: "Matcha", category: "tea", price: 1700 },
];

export const byCategory = (products: Product[], category: Category) =>
  category === "all" ? products : products.filter((p) => p.category === category);

import { useState } from "react";
import { PRODUCTS, byCategory, type Category } from "../shared/products.ts";

/* the cart is needed by the header and the list → it lives in their closest common parent */
export default function App() {
  const [cart, setCart] = useState<string[]>([]);
  return (
    <>
      <header>Cart: {cart.length}</header>
      <ProductList onAdd={(id) => setCart((ids) => [...ids, id])} />
    </>
  );
}

/* the filter is needed only here → local state */
function ProductList({ onAdd }: { onAdd: (id: string) => void }) {
  const [category, setCategory] = useState<Category>("all");
  return (
    <section>
      <select aria-label="Category" value={category} onChange={(e) => setCategory(e.target.value as Category)}>
        <option value="all">All</option>
        <option value="coffee">Coffee</option>
        <option value="tea">Tea</option>
      </select>
      <ul>
        {byCategory(PRODUCTS, category).map((p) => (
          <li key={p.id}>
            {p.name} <button onClick={() => onAdd(p.id)}>Add {p.name}</button>
          </li>
        ))}
      </ul>
    </section>
  );
}

import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from "react";

type CartValue = { ids: string[]; add: (id: string) => void };

const CartContext = createContext<CartValue | null>(null);

export function CartProvider({ children }: { children: ReactNode }) {
  const [ids, setIds] = useState<string[]>([]);
  const add = useCallback((id: string) => setIds((prev) => [...prev, id]), []);
  const value = useMemo(() => ({ ids, add }), [ids, add]);
  return <CartContext value={value}>{children}</CartContext>;
}

export function useCart() {
  const cart = useContext(CartContext);
  if (!cart) throw new Error("useCart must be used inside <CartProvider>");
  return cart;
}

import { CartProvider, useCart } from "./cart-context.tsx";
import { PRODUCTS } from "../shared/products.ts";

export default function App() {
  return (
    <CartProvider>
      <Header />
      <main>
        {PRODUCTS.map((p) => (
          <AddButton key={p.id} id={p.id} name={p.name} />
        ))}
      </main>
    </CartProvider>
  );
}

function Header() {
  const { ids } = useCart();
  return <header>Cart: {ids.length}</header>;
}

function AddButton({ id, name }: { id: string; name: string }) {
  const { add } = useCart();
  return <button onClick={() => add(id)}>Add {name}</button>;
}

npm install zustand @tanstack/react-query

import { create } from "zustand";

type CartState = {
  qty: Record<string, number>;
  add: (id: string) => void;
  clear: () => void;
};

export const useCartStore = create<CartState>()((set) => ({
  qty: {},
  add: (id) => set((state) => ({ qty: { ...state.qty, [id]: (state.qty[id] ?? 0) + 1 } })),
  clear: () => set({ qty: {} }),
}));

export const selectCount = (state: CartState) =>
  Object.values(state.qty).reduce((sum, n) => sum + n, 0);

import { selectCount, useCartStore } from "./cart-store.ts";
import { PRODUCTS } from "../shared/products.ts";

export default function App() {
  return (
    <>
      <Header />
      <main>
        {PRODUCTS.map((p) => (
          <AddButton key={p.id} id={p.id} name={p.name} />
        ))}
      </main>
    </>
  );
}

function Header() {
  const count = useCartStore(selectCount); // re-renders only when the number changes
  const clear = useCartStore((state) => state.clear);
  return (
    <header>
      Cart: {count} <button onClick={clear}>Clear</button>
    </header>
  );
}

function AddButton({ id, name }: { id: string; name: string }) {
  const add = useCartStore((state) => state.add);
  return <button onClick={() => add(id)}>Add {name}</button>;
}

import { useShallow } from "zustand/react/shallow";

// ✗ a new object on every call: React 19 + Zustand 5 fail with
//   "Maximum update depth exceeded"
const { count, clear } = useCartStore((s) => ({ count: selectCount(s), clear: s.clear }));

// ✓ useShallow compares the fields of the object, not the reference
const { count, clear } = useCartStore(useShallow((s) => ({ count: selectCount(s), clear: s.clear })));

import { useQuery } from "@tanstack/react-query";
import type { Category, Product } from "../shared/products.ts";

export async function fetchProducts(category: Category): Promise<Product[]> {
  const res = await fetch(`/api/products?category=${category}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

export function useProducts(category: Category) {
  return useQuery({
    queryKey: ["products", category], // every variable used by queryFn goes into the key
    queryFn: () => fetchProducts(category),
    staleTime: 60_000, // the menu rarely changes: treat it as fresh for a minute
  });
}

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Catalog } from "./Catalog.tsx";

const queryClient = new QueryClient();

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <Catalog />
    </QueryClientProvider>
  </StrictMode>,
);

import { useState } from "react";
import { useProducts } from "./products-api.ts";
import type { Category } from "../shared/products.ts";

export function Catalog() {
  const [category, setCategory] = useState<Category>("all");
  const { data, isPending, isError, refetch } = useProducts(category);

  return (
    <section>
      <select aria-label="Category" value={category} onChange={(e) => setCategory(e.target.value as Category)}>
        <option value="all">All</option>
        <option value="coffee">Coffee</option>
        <option value="tea">Tea</option>
      </select>
      {isPending && <p>Loading…</p>}
      {isError && (
        <p role="alert">
          Could not load the menu. <button onClick={() => refetch()}>Retry</button>
        </p>
      )}
      <ul>
        {data?.map((p) => (
          <li key={p.id}>{p.name}</li>
        ))}
      </ul>
    </section>
  );
}

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { afterEach, expect, it, vi } from "vitest";
import { Catalog } from "./Catalog.tsx";
import { PRODUCTS, byCategory, type Category } from "../shared/products.ts";

function renderWithClient() {
  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } }); // a fresh cache per test
  return render(
    <QueryClientProvider client={client}>
      <Catalog />
    </QueryClientProvider>,
  );
}

function mockApi() {
  const fetchMock = vi.fn(async (url: string) => {
    const category = new URL(url, "http://test").searchParams.get("category") as Category;
    return Response.json(byCategory(PRODUCTS, category));
  });
  vi.stubGlobal("fetch", fetchMock);
  return fetchMock;
}

afterEach(() => vi.unstubAllGlobals());

it("loads, filters through the query key and reuses the cache", async () => {
  const user = userEvent.setup();
  const fetchMock = mockApi();
  renderWithClient();

  expect(screen.getByText("Loading…")).toBeInTheDocument();
  expect(await screen.findByText("Espresso")).toBeInTheDocument();

  await user.selectOptions(screen.getByLabelText("Category"), "tea");
  expect(await screen.findByText("Matcha")).toBeInTheDocument();
  expect(screen.queryByText("Espresso")).not.toBeInTheDocument();

  await user.selectOptions(screen.getByLabelText("Category"), "all");
  expect(await screen.findByText("Espresso")).toBeInTheDocument();
  expect(fetchMock).toHaveBeenCalledTimes(2); // "all" came from the cache: staleTime has not passed
});

it("shows an error and retries on demand", async () => {
  const user = userEvent.setup();
  vi.stubGlobal("fetch", vi.fn(async () => new Response(null, { status: 500 })));
  renderWithClient();

  expect(await screen.findByRole("alert")).toHaveTextContent("Could not load the menu");

  mockApi();
  await user.click(screen.getByRole("button", { name: "Retry" }));
  expect(await screen.findByText("Latte")).toBeInTheDocument();
});

import type { Category } from "../shared/products.ts";

const CATEGORIES: Category[] = ["all", "coffee", "tea"];

export function readCategory(): Category {
  const value = new URLSearchParams(window.location.search).get("category");
  return CATEGORIES.find((c) => c === value) ?? "all";
}

export function writeCategory(category: Category) {
  const params = new URLSearchParams(window.location.search);
  if (category === "all") params.delete("category");
  else params.set("category", category);
  const query = params.toString();
  window.history.replaceState(null, "", query ? `?${query}` : window.location.pathname);
}

import { useState } from "react";
import { readCategory, writeCategory } from "./category-param.ts";
import type { Category } from "../shared/products.ts";

export function UrlFilter() {
  const [category, setCategory] = useState<Category>(readCategory);

  function change(next: Category) {
    setCategory(next);
    writeCategory(next); // a shared link now opens the same filter
  }

  return (
    <select aria-label="Category" value={category} onChange={(e) => change(e.target.value as Category)}>
      <option value="all">All</option>
      <option value="coffee">Coffee</option>
      <option value="tea">Tea</option>
    </select>
  );
}

$ npx vitest run --reporter=verbose
 ✓ src/e-url/UrlFilter.test.tsx > reads the filter from the URL and writes it back
 ✓ src/e-url/UrlFilter.test.tsx > ignores unknown values
 ✓ src/cart.test.tsx > cart via lifted state > the header sees what the list adds
 ✓ src/d-query/Catalog.test.tsx > loads, filters through the query key and reuses the cache
 ✓ src/d-query/Catalog.test.tsx > shows an error and retries on demand
 ✓ src/cart.test.tsx > cart via context > the header sees what the list adds
 ✓ src/cart.test.tsx > cart via zustand > the header sees what the list adds
 ✓ src/cart.test.tsx > local filter state does not leak into the cart
 ✓ src/cart.test.tsx > useCart outside the provider fails loudly
 ✓ src/cart.test.tsx > zustand store works outside React too

 Test Files  3 passed (3)
      Tests  10 passed (10)