Zustand jako lepsza alternatywa dla Reduxa

Nieodłącznym elementem każdej aplikacji webowej jest zarządzaniem stanem. W starszych aplikacjach znane było podejście polegające na przekazywaniu stanu do różnych aplikacji, jednak metoda ta przestała być efektywna wraz ze wzrostem złożoności projektu. Z pomocą przyszły biblioteki stworzone do przechowywania i zarządzania globalnym stanem, z których najpopularniejszą wydaje się Redux. Jednak czy jest to najlepsza biblioteka tego typu? Popularność zyskuje Zustand (zustand to „stan” po niemiecku) , która wydaje się być o wiele prostsza i łatwiejsza do zaimpleanetowania od Reduxa, w którym często mamy do czynienia z dużą ilością niepotrzebnego kodu.

Zustand został stworzony przez developerów, którzy są odpowiedzialni za Jotai (inna biblioteka do zarządzania stanem) czy też react-spring (biblioteka do animacji). Zalety używania Zustand to nie tylko mniejsza ilość kodu czy łatwiejsza dokumentacja ale również renderowanie komponentów tylko w przypadku gdy stan ulegnie zmianie, zmiany w stanie mogą być obsługiwane bez konieczności ponownego renderowania komponentów czy też brak konieczności używania Context Providera, który jest wymagany w przypadku Reduxa. Zustand jest bardzo elastyczny (może być użyty wraz z Typescript’em) i jest łatwy do integracji z immerem.

Implementacja

Aby zacząć używać Zustand należy najpierw go zainstalować możemy do tego użyć komendy: npm install zustand lub yarn add zustand.

Kiedy biblioteka jest już zainstalowana w folderze src należy stworzyć folder store, a w nim umieścić plik z naszym globalnym stanem: store.js. Następnie importujemy pakiet zustand: import create from ‚zustand'.

Aby zdefiniować nasz stan używamy funkcji create , która przyjmuję funkcję typu callback, która to zwraca obiekt z naszym zdefiniowanym stanem.

W tym przypadku mamy stan obiektu, dla którego wartości początkowe (liczba i nazwa) są już zdefiniowane.

import create from 'zustand';
export const usePhoneStore = create () => ({
 amount: 1,
 name: ‚iPhoneX’ ,
}));

Aby uzyskać dostęp do wcześniej zdefiniowanego stanu tworzymy nową zmienną.

import { usePhoneStore } from './store/phoneStore';
const App = () => {
 const amount = usePhoneStore(state => state.amount)
 return (
 <div>
 <h1>Phone amount: {amount} </h1>
 </div>
 )
}
export default App

Aby zmienić stan naszej aplikacji należy utworzyć nową wartość w obiekcie i przypisać do niej funkcję. W nowo zdefiniowanej funkcji jest wykorzystywany parametr „set”.

import create from 'zustand'
export const usePhoneStore = create((set) => ({
 amount: 40,
 updateAmount: (newAmount: number ) => set({ amount: newAmount }),
}));

Funkcje służącą do zmiany stanu wywołujemy w identyczny sposób jak w przypadku samego stanu.

import { usePhoneStore } from ‚./store/phoneStore';
const App = () => {
 const amount = usePhoneStore(state => state.amount)
 const updateAmount = usePhoneStore(state => state.updateAmount)
 return (
 <div>
 <h1> Phone amount: {amount} </h1>
 <button
 onClick={ () => updateAmount(10) }
 > Update Amount </button>
 </div>
 )
}
export default App

Zustand to łatwa i przyjemna biblioteka do zaimplementowania, która może być lepszą alternatywą dla Reduxa co z pewnością pokazuje powyższy przykład. Oczywiście sama biblioteka ma o wiele więcej możliwości takich jak utrzymywanie stanu czy możliwość przechowywania asynchronicznych danych co tym bardziej przemawia za tym aby wykorzystać ją w jednym ze swoich projektów.

Czy szukasz wykonawcy projektów IT ?

Sprawdź case studies