Zustand do lekkiego zarządzania stanem React
Proszę utworzyć store Zustand za pomocą create(), odczytywać stan przez hook, aktualizować go akcjami oraz korzystać z minimalistycznego API bez zbędnego kodu pomocniczego.
Zustand do lekkiego zarządzania stanem React to bezpłatna lekcja Frontend 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym jest Zustand?
Zustand to minimalna i szybka biblioteka do zarządzania stanem w React. Całe API jest niewielkie: należy utworzyć store i użyć hooka do jego odczytywania oraz aktualizowania. Nie ma reduktorów, akcji ani powtarzalnego kodu.
Tworzenie store
create() definiuje store zawierający stan i akcje jako zwykły obiekt. Zwrócona wartość jest hookiem.
import { create } from 'zustand';
interface CounterStore {
count: number;
increment: () => void;
decrement: () => void;
reset: () => void;
}
export const useCounterStore = create<CounterStore>((set) => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 })),
decrement: () => set(state => ({ count: state.count - 1 })),
reset: () => set({ count: 0 }),
}));Odczytywanie stanu store
Należy wywołać hook z funkcją selektora, aby subskrybować określone fragmenty stanu. Komponent jest renderowany ponownie tylko wtedy, gdy wybrany fragment się zmieni.
function Counter() {
const count = useCounterStore(state => state.count);
return <p>Count: {count}</p>;
}Odczytywanie akcji
Akcje należy wybierać w ten sam sposób. Nie zmieniają się, więc ich wybieranie nie powoduje dodatkowego renderowania komponentu.
function Controls() {
const { increment, decrement } = useCounterStore(
state => ({ increment: state.increment, decrement: state.decrement })
);
return (
<div>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
}Aktualizowanie stanu za pomocą set()
Funkcja set() wykonuje płytkie scalanie aktualizacji (podobnie jak setState w komponentach klasowych React). W przypadku aktualizacji zależnych od poprzedniego stanu należy przekazać funkcję.
// Merge:
set({ loading: true });
// Function for dependent updates:
set(state => ({ count: state.count + 1 }));
// Replace entirely (replace: true):
set({ count: 0, loading: false }, true);Akcje asynchroniczne
Akcje w Zustand mogą być asynchroniczne — wystarczy wywołać set() po zakończeniu operacji asynchronicznej przez await.
export const useUsersStore = create<UsersStore>((set) => ({
users: [],
loading: false,
fetchUsers: async () => {
set({ loading: true });
const users = await fetch('/api/users').then(r => r.json());
set({ users, loading: false });
}
}));Slices — składanie dużych store
Duży store można podzielić na fragmenty (osobne obiekty), a następnie je połączyć. Wzorzec Zustand nie wymaga abstrakcji fragmentów, ale jest to przejrzysty sposób organizowania dużych store.
Middleware: persist
Middleware persist zapisuje stan Zustand w localStorage i odtwarza go przy wczytywaniu — przy minimalnej konfiguracji.
import { persist } from 'zustand/middleware';
export const useSettingsStore = create<Settings>(
persist(
(set) => ({
theme: 'light',
setTheme: (theme) => set({ theme })
}),
{ name: 'app-settings' } // localStorage key
)
);Middleware: devtools
Obsługę Redux DevTools w Zustand można dodać za pomocą middleware devtools. Otrzymujemy pełne rejestrowanie akcji i podróż w czasie.
Zustand a Redux Toolkit
Zustand: minimalny, bez powtarzalnego kodu, szybki w konfiguracji, świetny dla małych i średnich aplikacji. RTK: ustrukturyzowany, skalowalny, z najlepszymi w swojej klasie narzędziami DevTools, lepszy dla dużych zespołów. Oba rozwiązania są solidnym wyborem — prostota Zustand sprawdza się w większości aplikacji.
Selektory a wydajność
Należy zawsze wybierać najmniejszy fragment stanu potrzebny komponentowi. Wybieranie całego obiektu stanu powoduje ponowne renderowanie przy każdej zmianie store. Przy wyborze wielu właściwości należy użyć shallow z zustand/shallow.
import { shallow } from 'zustand/shallow';
const { theme, font } = useSettingsStore(
state => ({ theme: state.theme, font: state.font }),
shallow // compare each property shallowly
);Szybkie sprawdzenie
Jak utworzyć store Zustand, którego może używać cała aplikacja React?
Podsumowanie: Zustand
create() definiuje stan i akcje. Zwrócona wartość jest hookiem. Należy wybierać fragmenty stanu, aby unikać niepotrzebnego ponownego renderowania. set() scala aktualizacje stanu. Akcje asynchroniczne wywołują set() po await. Middleware persist służy do zapisu w localStorage. devtools zapewnia integrację z Redux DevTools. Provider nie jest potrzebny.
Często zadawane pytania
Czy lekcja „Zustand do lekkiego zarządzania stanem React” jest bezpłatna?
Tak — pełny tekst „Zustand do lekkiego zarządzania stanem React” 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Zustand do lekkiego zarządzania stanem React”?
Proszę utworzyć store Zustand za pomocą create(), odczytywać stan przez hook, aktualizować go akcjami oraz korzystać z minimalistycznego API bez zbędnego kodu pomocniczego. Ćwiczysz Frontend 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ąć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend 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 „Zustand do lekkiego zarządzania stanem React”?
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 Frontend Academy?
Tak. Każda lekcja Frontend 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
- Redux Toolkit: createSlice i configureStore
- Zustand do lekkiego zarządzania stanem React
- Pinia dla Vue: defineStore i storeToRefs
- Kiedy używać stanu globalnego, a kiedy lokalnego