zustand-5

Skill do pracy z Zustand 5 – biblioteką do zarządzania stanem w aplikacjach React. Zawiera gotowe wzorce dla podstawowych magazynów stanu, middleware'u persystencji (zapis do localStorage) i selektorów optymalizujących renderowanie. Automatycznie aktywuje się, gdy implementujesz sklady Zustand, selektory lub middleware persystencji. Pozwala szybko tworzyć reaktywne komponenty z kontrolowanym stanem bez zbędnych re-renderów.

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.