Notizia

Dec 04, 2023

Esplorare la gestione dello stato in React utilizzando Jotai: una guida pratica

Migliora la gestione dello stato della tua app React con Jotai: un'alternativa più semplice a Redux e perfetta per progetti più piccoli! La gestione dello stato nei progetti su piccola scala è generalmente semplice utilizzando React

Migliora la gestione dello stato della tua app React con Jotai: un'alternativa più semplice a Redux e perfetta per progetti più piccoli!

La gestione dello stato nei progetti su piccola scala è generalmente semplice utilizzando gli hook e gli oggetti di scena React. Tuttavia, man mano che l'applicazione cresce e sorge la necessità di condividere e accedere ai dati tra diversi componenti, spesso si porta a ricorrere alla perforazione. Sfortunatamente, la perforazione dell'elica può rapidamente ingombrare la base di codice e introdurre sfide di scalabilità.

Sebbene Redux offra un'ottima soluzione di gestione dello stato, la sua API può essere travolgente per progetti relativamente piccoli. Al contrario, Jotai, una libreria di gestione statale minima che sfrutta unità indipendenti di stati chiamate atomi per gestire lo stato, elimina sfide come la perforazione degli oggetti di scena e consente un approccio di gestione dello stato più semplice e scalabile.

Jotai è una biblioteca di gestione dello stato che offre una semplice soluzione di gestione dello stato in contrasto con alternative più complesse come Redux. Utilizza unità di stato indipendenti chiamate atomi per gestire lo stato nell'applicazione React.

Idealmente, diversi componenti dell'applicazione accedono e aggiornano questi atomi utilizzando un hook fornito da Jotai chiamatoutilizzareAtom . Ecco un semplice esempio di come creare un atomo Jotai:

Per accedere e lavorare con gli atomi in Jotai, puoi semplicemente usareutilizzareAtomhook che, come altri hook React, ti consente di accedere e aggiornare il valore di uno stato all'interno di un componente funzionale.

Ecco un esempio per dimostrarne l'utilizzo:

In questo esempio, ilutilizzareAtomil gancio viene utilizzato per accedere acountAtom atomo e il suo valore associato. ILsetCountLa funzione viene utilizzata per aggiornare il valore dell'atomo e tutti i componenti associati verranno automaticamente ri-renderizzati con il valore aggiornato.

Attivando solo i componenti interessati, riduce i nuovi rendering non necessari nell'applicazione. Questo approccio mirato al nuovo rendering migliora le prestazioni complessive dell'applicazione.

Una volta chiarite le nozioni di base, creiamo una semplice app To-do React per comprendere meglio le capacità di gestione dello stato di Jotai.

Puoi trovare il codice sorgente di questo progetto in questo repository GitHub.

Per iniziare, crea un'applicazione React. In alternativa, puoi utilizzare Vite per impostare un progetto React. Una volta creata l'impalcatura di un'applicazione React di base, vai avanti e installa Jotai nella tua applicazione.

Successivamente, per utilizzare Jotai nella tua applicazione, devi avvolgere l'intera app con il fileFornitore componente. Questo componente contiene l'archivio che funge da hub centrale per fornire valori atomici in tutta l'applicazione.

Inoltre, ti consente di dichiarare lo stato iniziale degli atomi. Avvolgendo la tua app con il fileFornitore, tutti i componenti dell'applicazione ottengono l'accesso agli atomi che hai definito e possono quindi interagire e aggiornare lo stato tramiteutilizzareAtomgancio.

Ora avvolgi l'applicazione nel fileindice.jsOmain.jsxcome mostrato di seguito.

L'archivio funge da archivio centrale per lo stato dell'applicazione. Solitamente contiene la definizione di atomi, selettori e qualsiasi altra funzione correlata richiesta per la gestione dello stato utilizzando Jotai.

In questo caso gestisce gli atomi per la gestione dell'elenco di elementi per l'applicazione To-do. Nelsrcdirectory, creareTodoStore.jsxfile e aggiungi il codice qui sotto.

Creando ed esportando il fileTodosAtom, puoi interagire e aggiornare comodamente lo stato delle cose da fare tra i diversi componenti dell'applicazione.

Ora che hai configurato Jotai nell'applicazione React e creato un atom per gestire lo stato dell'applicazione, vai avanti e crea un semplice componente da fare che gestirà le funzionalità di aggiunta, eliminazione e modifica per le voci da fare.

Creane uno nuovocomponenti/Todo.jsxfile nel