Aumenta di livello la gestione dello stato in React: perché Zustand ti aiuta a gestire lo stato come un professionista rispetto a Redux?

Raba Ali Shah

Seguire

--

Ascoltare

Condividere

La gestione degli stati è una delle parti più impegnative durante la creazione di un'applicazione che ogni sviluppatore deve affrontare. Senza dubbio, utilizzando alcuni React Hooks questo problema può essere risolto, ma la gestione dello stato può essere sempre più complessa nelle app più grandi. In questi casi, non possiamo semplicemente fare affidamento su hook React molto comuni come useState e useReducer ecc. Poiché ogni libreria porta una soluzione per un problema particolare. Nel caso di React e per la gestione delle istruzioni più complesse, Dan Abramov ha introdotto una libreria chiamata Redux.

Redux viene fornito con uno straordinario concetto di negozio centralizzato disponibile in modo indipendente nell'app React. Questo concetto aiuta uno sviluppatore a non preoccuparsi di ottenere lo stato corrente di un componente o di manipolarlo. Tutto quello che devi fare è racchiudere lo store nel provider al livello più alto della tua app React e le funzioni di importazione utilizzando alcuni hook Redux nei componenti in cui desideri leggere lo stato corrente o manipolarlo.

Creazione del negozio Redux:

In questo modo crei un negozio Redux che contiene stati iniziali, funzioni di riduzione o azioni che vogliamo eseguire sui nostri stati per aggiornare i loro stati attuali. In questo caso, questo archivio contiene in realtà tutta la logica per un semplice contatore che aggiunge o sottrae valori facendo clic rispettivamente sul pulsante "Incrementa" o "Decrementa".

Una volta creato il nostro negozio, è il momento di associarlo al nostro componente React:

Oltre alla nostra app nel file index.js, forniamo l'archivio Redux all'app. In parole semplici, stiamo dichiarando il nostro negozio al livello più alto della nostra app React in modo che il suo stato sia disponibile per tutti i suoi elementi figli.

Ora andiamo al file in cui vogliamo utilizzare il nostro Redux Store:

Avrai bisogno dell'hook useSelector per ottenere i dati dall'archivio Redux e quindi utilizzando l'hook useDispatch puoi chiamare l'azione per aggiornare il tuo stato.

Ecco come gestisci gli stati in Redux.

Il problema che potresti aver notato è il lungo boilerplate di Redux. Anche per gestire logiche così semplici, è necessario impostare tutti i boilerplate Redux sopra menzionati. E a volte diventa complesso capire cosa sta succedendo con Redux perché per ottenere i dati è necessario un hook useSelector aggiuntivo e per chiamare la tua azione è necessario un hook useDispatch. Il che diventa frenetico da utilizzare in app più grandi in cui la gestione dello stato è molto più complessa.

La soluzione a questo problema è Zustand. Si tratta di una soluzione di gestione dello stato React piccola, veloce e scalabile che utilizza principi di flusso semplificati. Zustand viene fornito con lo stesso concetto di negozio centralizzato che gestisce il tuo stato ed è disponibile attraverso la tua app.

La cosa migliore di Zustand è che, a differenza di Redux, non è necessario impostare un lungo boilerplate e utilizzare hook aggiuntivi per leggere, chiamare e manipolare gli stati. Tutto ciò che serve è creare un negozio e utilizzarlo semplicemente ovunque nella tua app React. Non è necessario includere il fornitore al livello più alto dell'app.

Creazione dell'archivio condizioni:

Guarda come è semplice creare un negozio a Zustand. Semplicemente usando la funzione crea. Dopo aver creato il tuo negozio con Zustand. È ora di associarlo al componente in cui desideri leggere i dati dal tuo negozio.

Questo è il modo in cui chiamerai le tue funzioni di riduzione, le cosiddette azioni. Importa semplicemente la tua azione e chiamala. Questo è tutto! NON C'È BISOGNO di hook aggiuntivi per leggere e inviare azioni. Basta importarli e utilizzarli.

Spero che dopo aver visto tutto il codice sopra, la semplicità di Zustand e il suo confronto con Redux tu abbia ottenuto la tua risposta, ma di seguito sono comunque riportati alcuni vantaggi che otterrai utilizzando Zustand.

La gestione degli stati può risultare impegnativa nelle applicazioni più complesse e di grandi dimensioni. Senza dubbio, Redux e hook come useContext, useReducer sono qui per aiutarci. Ma il problema è la configurazione lunga e complessa che rende Redux meno facile da usare durante la gestione degli stati.

Ecco che arriva Zustand, una soluzione di gestione dello stato piccola, veloce e scalabile per le app React. La sua semplicità, la minore configurazione standard e i comportamenti di gestione dello stato intuitivi lo rendono più favorevole di Redux. Sentiti libero di utilizzare Zustand nella tua produzione e goditi la bellezza della gestione degli stati in modo pulito e semplice.