kontakt
Software house
>
Blog
>
Zustand jako lepsza alternatywa dla Reduxa

Zustand jako lepsza alternatywa dla Reduxa

Data wpisu
Michał Pączko
Autor
Michał Pączko
Programowanie

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.

Ostatnie Wpisy