0Pricing
React Academy · Lekcja

Tworzenie pierwszego store Zustand

Definiowanie store za pomocą create(), dodawanie fragmentów stanu i akcji oraz korzystanie z niego przez useStore.

Tworzenie pierwszego store Zustand to bezpłatna lekcja React Academy na CoddyKit. To lekcja 1 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 React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Witamy

W tej lekcji utworzysz swój pierwszy store Zustand za pomocą create(), zdefiniujesz fragmenty stanu i akcje oraz użyjesz store'a w komponentach React.

Czym jest Zustand?

Zustand to minimalna biblioteka do zarządzania stanem, która nie narzuca konkretnego podejścia. Store jest zwykłym obiektem JavaScript zawierającym stan i funkcje. Komponenty subskrybują go za pomocą hooka. Bez providerów, reducerów i zbędnego kodu.

Instalacja

Zainstaluj Zustand. Nie ma on żadnych zależności peer.
npm install zustand

Tworzenie store'a

Wywołaj create() z funkcją, która zwraca stan początkowy i akcje. Funkcja otrzymuje pomocniczą funkcję `set` do aktualizowania stanu.
import { create } from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

Używanie store'a w komponencie

Wywołaj hook store'a w dowolnym komponencie, aby uzyskać dostęp do stanu i akcji. Nie jest potrzebny żaden otaczający Provider.
function Counter() {
  const count = useCounterStore(state => state.count);
  const increment = useCounterStore(state => state.increment);
  return (
    <>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
    </>
  );
}

Składnia selektora

Przekaż funkcję selektora do hooka store'a, aby subskrybować tylko potrzebny fragment stanu. Komponent zostanie ponownie wyrenderowany tylko wtedy, gdy wybrana wartość się zmieni.
const count = useCounterStore(s => s.count);
const reset = useCounterStore(s => s.reset);
// Only re-renders when count changes, not the whole store

Aktualizowanie stanu za pomocą set

Funkcja `set` płytko scala nowe wartości ze store'em. Możesz przekazać obiekt albo funkcję, która otrzymuje bieżący stan i zwraca częściowe aktualizacje.
set({ count: 0 }) // direct set
set(state => ({ count: state.count + 1 })) // functional update

Akcje asynchroniczne

Akcje mogą być asynchroniczne. Wywołaj set po oczekiwaniu na dane. Nie potrzebujesz middleware — wystarczy pisać zwykłe funkcje asynchroniczne.
const useUserStore = create((set) => ({
  user: null,
  fetchUser: async (id) => {
    const data = await fetch('/api/user/' + id).then(r => r.json());
    set({ user: data });
  },
}));

Aktualizowanie zagnieżdżonego stanu

W przypadku zagnieżdżonych obiektów ręcznie rozwiń zewnętrzny poziom albo użyj middleware immer do głębokich modyfikacji. Domyślnie set scala tylko klucze najwyższego poziomu.
set(state => ({
  user: { ...state.user, name: 'Alice' }
}));

Odczytywanie store'a poza Reactem

Uzyskaj dostęp do stanu store'a poza komponentem za pomocą getState(), a zmiany subskrybuj za pomocą subscribe(). Jest to przydatne podczas testowania i w kodzie niezależnym od Reacta.
const count = useCounterStore.getState().count;
useCounterStore.subscribe(state => console.log(state.count));

Szybkie sprawdzenie

Co robi funkcja set w store'ze Zustand?

Podsumowanie

Utwórz store Zustand za pomocą create((set) => ({ state, actions })). Używaj składni selektora w komponentach, aby subskrybować poszczególne fragmenty stanu. Akcje wywołują set() w celu aktualizacji stanu. Działa to asynchronicznie i poza Reactem za pomocą getState().

Dalej

Następna lekcja: **Selektory i zapobieganie niepotrzebnym ponownym renderowaniom** — wyodrębnisz konkretne fragmenty stanu, aby komponenty były ponownie renderowane tylko wtedy, gdy jest to potrzebne.

Często zadawane pytania

Czy lekcja „Tworzenie pierwszego store Zustand” jest bezpłatna?

Tak — pełny tekst „Tworzenie pierwszego store 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 React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Tworzenie pierwszego store Zustand”?

Definiowanie store za pomocą create(), dodawanie fragmentów stanu i akcji oraz korzystanie z niego przez useStore. Ćwiczysz React 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ąć React Academy?

Nie wymagamy żadnego doświadczenia. React 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 1 z 4.

Ile czasu zajmuje lekcja „Tworzenie pierwszego store 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 React Academy?

Tak. Każda lekcja React 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

  1. Tworzenie pierwszego store Zustand
  2. Selektory i zapobieganie zbędnym ponownym renderowaniom
  3. Utrwalanie stanu za pomocą middleware persist
  4. Zustand DevTools i testowanie store'ów
← Powrót do React Academy