TypeScript Academy · Lekcja

Wzorce typowania store’ów Zustand

Definiuj typowane store’y Zustand za pomocą interfejsów i akcji.

Wzorce typowania store’ów Zustand to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Dlaczego warto typować Zustand

Zustand to minimalistyczna biblioteka do zarządzania stanem. Dzięki prawidłowej integracji z TypeScript uzyskują Państwo bezpieczne typowo odczyty store'a, akcje i selektory bez zbędnego kodu.

import { create } from "zustand";

Podstawowy typowany store

Zdefiniuj interfejs store'a i przekaż go jako parametr generyczny do create.

interface CounterStore {
  count: number;
  increment: () => void;
  decrement: () => void;
}

const useCounter = create<CounterStore>((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
  decrement: () => set((s) => ({ count: s.count - 1 })),
}));

Odczytywanie stanu store'a

Użyj hooka z selektorem, aby odczytać określone fragmenty stanu. TypeScript wywnioskuje typ zwracany na podstawie selektora.

function Counter() {
  const count = useCounter((s) => s.count);       // number
  const increment = useCounter((s) => s.increment); // () => void
  return <button onClick={increment}>{count}</button>;
}

Rozdzielanie stanu i akcji

Popularny wzorzec oddziela właściwości stanu od metod akcji w interfejsie, zapewniając przejrzystszą organizację.

interface State { count: number; }
interface Actions { increment: () => void; reset: () => void; }
type CounterStore = State & Actions;

Asynchroniczne akcje w Zustand

Zustand natywnie obsługuje asynchroniczne akcje — wystarczy, że funkcja akcji wewnątrz creatora będzie asynchroniczna.

interface UserStore {
  users: User[];
  fetchUsers: () => Promise<void>;
}

const useUserStore = create<UserStore>((set) => ({
  users: [],
  fetchUsers: async () => {
    const data = await api.getUsers();
    set({ users: data });
  },
}));

Typowanie middleware immer

Użyj middleware immer w Zustand do aktualizacji w stylu mutowalnym. Typ store'a zostanie prawidłowo przekazany.

import { immer } from "zustand/middleware/immer";

const useStore = create<CounterStore>()(
  immer((set) => ({
    count: 0,
    increment: () => set((state) => { state.count++; }),
  }))
);

Middleware devtools

Połącz devtools z prawidłowym typowaniem, aby włączyć obsługę Redux DevTools przy zachowaniu typów.

import { devtools } from "zustand/middleware";

const useStore = create<CounterStore>()(
  devtools(
    (set) => ({ count: 0, increment: () => set({ count: 1 }) }),
    { name: "CounterStore" }
  )
);

Typowanie utrwalonego store'a

Middleware persist serializuje stan do localStorage. Należy typować go prawidłowo za pomocą interfejsu częściowego stanu.

import { persist } from "zustand/middleware";

const useStore = create<CounterStore>()(
  persist(
    (set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }),
    { name: "counter-storage" }
  )
);

Wzorzec typowanych slice'ów

W przypadku dużych store'ów podziel je na typowane slice'y, które zostaną połączone w jednym wywołaniu create.

type UserSlice = { users: User[]; setUsers: (u: User[]) => void; };
type UiSlice = { modal: boolean; openModal: () => void; };
type AppStore = UserSlice & UiSlice;

Subskrybowanie poza React

Uzyskaj dostęp do stanu store'a i subskrybuj zmiany poza komponentami React, korzystając z typowanego API store'a.

// Access current state outside React
const count = useCounter.getState().count;

// Subscribe to changes
useCounter.subscribe((state) => console.log(state.count));

Podsumowanie: typowanie Zustand

Typowanie Zustand: zdefiniuj interfejs store'a, przekaż go do create, używaj selektorów do typowanych odczytów stanu oraz nakładaj middleware (immer, devtools, persist) za pomocą wzorca curry, aby zapewnić prawidłowy przepływ typów.

Szybkie sprawdzenie

Jak odczytać konkretny fragment stanu Zustand w komponencie bez ponownych renderowań spowodowanych niepowiązanymi zmianami?

Czego się Państwo nauczyli

Store'y Zustand są typowane przez przekazanie interfejsu jako parametru generycznego do create. Należy używać funkcji selektora do wydajnych i bezpiecznych typowo odczytów stanu. Middleware, takie jak immer, devtools i persist, należy łączyć za pomocą wzorca curry Zustand, aby zapewnić prawidłowe wnioskowanie typów w TypeScript.

Często zadawane pytania

Czy lekcja „Wzorce typowania store’ów Zustand” jest bezpłatna?

Tak — pełny tekst „Wzorce typowania store’ów Zustand” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wzorce typowania store’ów Zustand”?

Definiuj typowane store’y Zustand za pomocą interfejsów i akcji. Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Wzorce typowania store’ów Zustand”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?

Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Typowanie slice’ów i thunków Redux Toolkit
Wzorce typowania store’ów Zustand
XState: typowane maszyny stanów
Stan pochodny i selektory z typami

← Powrót do TypeScript Academy