Understanding Zustand

Zarządzanie stanem często wydaje się zbyt skomplikowane.

Wiesz, jak używać React useState. Wiesz, jak przekazywać propsy. Wiesz, jak podnosić stan.

Ale wszystko zaczyna się sypać, gdy Twoja aplikacja rośnie. Zaczynasz przekazywać dane przez komponenty, które ich nie potrzebują. To jest właśnie prop drilling. Sprawia to, że Twój kod staje się nieczytelny i trudny w utrzymaniu.

Zustand rozwiązuje ten problem. Zapewnia Twojej aplikacji współdzielony stan poza komponentami React.

Pomyśl o tym w ten sposób:

Bez Zustand: Komponent A przekazuje propsy do B, B przekazuje propsy do C, a C przekazuje propsy do D.

Z Zustand: Każdy komponent komunikuje się bezpośrednio z centralnym storem. Bez pośredników. Bez prop drillingu.

Store w Zustand składa się z dwóch elementów:

  • State: Twoje dane.
  • Actions: Funkcje, które zmieniają Twoje dane.

To wszystko.

Zustand jest szybki, ponieważ renderuje ponownie tylko te komponenty, które używają konkretnych danych, które uległy zmianie.

Jeśli chcesz, aby Twoje dane przetrwały odświeżenie strony, użyj localStorage. Ponieważ localStorage przechowuje tylko ciągi znaków, musisz użyć JSON.stringify do zapisywania obiektów i JSON.parse do ich odczytywania.

Oto prosty sposób na ustrukturyzowanie auth store:

  • Przechowuj użytkownika i token w localStorage.
  • Użyj funkcji login, aby zaktualizować store oraz pamięć przeglądarki.
  • Użyj funkcji logout, aby wyczyścić oba te miejsca.

Jak wypada w porównaniu z Redux?

Redux wymaga dispatcherów i reducerów. Wiąże się to z dużą ilością kodu boilerplate. Zustand pozwala wywoływać funkcję bezpośrednio. Ma mniejszy narzut poznawczy i wymaga mniej konfiguracji.

Typowe błędy, których należy unikać:

  • Zapominanie o zwróceniu obiektu w funkcji create. Użyj nawiasów wokół swojego obiektu.
  • Używanie średników wewnątrz obiektu stanu. Zamiast tego używaj przecinków.
  • Parsowanie danych, które są już ciągiem znaków.

Biblioteki do zarządzania stanem nie służą do zarządzania stanem. Służą do zarządzania złożonością.

Przestań próbować zapamiętać każde API. Zacznij patrzeć na problem, który dane narzędzie stara się rozwiązać. Gdy zrozumiesz problem, narzędzie stanie się zrozumiałe.

Źródło: https://dev.to/chinwuba_jeffrey/understanding-zustand-2g11