zustand-5

Zustand 5 state management patterns. Trigger: When implementing client-side state with Zustand (stores, selectors, persist middleware, slices).

1. Zainstaluj skill w swoim projekcie React, gdzie chcesz używać Zustand do zarządzania stanem aplikacji.

2. Utwórz podstawowy magazyn stanu, definiując interfejs TypeScript z polami stanu i funkcjami akcji, następnie użyj create() z Zustand do inicjalizacji magazynu i zwrócenia hook'a do użytku w komponentach.

3. Konsumuj stan w komponentach, wywołując hook magazynu i destrukturyzując potrzebne pola stanu oraz akcje, które będą dostępne w komponencie.

4. Aby utrwalić stan w localStorage, opakowaj logikę magazynu middleware'em persist() z Zustand, podając nazwę klucza przechowywania – stan będzie automatycznie zapisywany i przywracany.

5. Optymalizuj renderowanie za pomocą selektorów – zamiast pobierać cały stan, wybieraj tylko konkretne pola funkcją strzałkową, co zapobiega niepotrzebnym re-rendrom komponentu.

6. Skill automatycznie zasugeruje się, gdy napiszesz kod inicjujący magazyn Zustand lub używający persist middleware'u – skorzystaj z podpowiedzi, aby przyspieszyć implementację wzorców.