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

La gestione dello stato in progetti su piccola scala è generalmente semplice utilizzando gli hook e gli oggetti di scena di React. Tuttavia, man mano che l'applicazione cresce e sorge la necessità di condividere e accedere ai dati tra diversi componenti, spesso porta alla perforazione dell'elica. Sfortunatamente, la perforazione dell'elica può ingombrare rapidamente la base di codice e introdurre problemi 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 minima di gestione dello stato che sfrutta unità indipendenti di stati chiamate atomi da gestire stato, elimina le sfide come la perforazione dell'elica e consente una gestione dello stato più semplice e scalabile approccio.

Cos'è Jotai e come funziona?

Jotai è una libreria 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 nell'applicazione accedono e aggiornano questi atomi utilizzando un hook fornito da Jotai chiamato the usa Atom. Ecco un semplice esempio di come creare un atomo Jotai:

importare {atomo} da'Jotai';
cost conteggioAtomo = atomo(1);

Per accedere e lavorare con gli atomi in Jotai, puoi semplicemente usare usa Atom gancio che, come altri Reagisci ai ganci, consente di accedere e aggiornare il valore di uno stato all'interno di un componente funzionale.

Ecco un esempio per dimostrare il suo utilizzo:

importare { usaAtomo } da'Jotai';
cost conteggioAtomo = atomo(1);
funzioneIl mio componente() {
cost [count, setCount] = useAtom (countAtom);
cost incremento = () => impostaConteggio((prevCount) => prevConteggio + 1);
ritorno (


Conteggio: {conteggio}</p>
Incremento</button>
 </div>
 );
}

In questo esempio, il usa Atom hook viene utilizzato per accedere a countAtom atomo e il suo valore associato. IL setCount La 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 re-rendering non necessari nell'applicazione. Questo approccio mirato al re-rendering migliora le prestazioni complessive dell'applicazione.

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

Gestione dello stato in React utilizzando Jotai

Per iniziare, creare un'applicazione React. In alternativa, puoi utilizzare Vite per impostare un progetto React. Dopo aver eseguito lo scaffolding di un'applicazione React di base, vai avanti e installa Jotai nella tua applicazione.

npm installa jotai

Successivamente, per utilizzare Jotai nella tua applicazione, devi avvolgere l'intera app con il file Fornitore componente. Questo componente contiene l'archivio che funge da hub centrale per la fornitura di valori Atom in tutta l'applicazione.

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

importare { Fornitore } da"Jotai";

Ora avvolgi l'applicazione nel file index.js O main.jsx come mostrato di seguito.

importare Reagire da'reagire'
importare Reagire DOM da'react-dom/cliente'
importare App da'./App.jsx'
importare'./indice.css'
importare { Fornitore } da"Jotai";
ReactDOM.createRoot(documento.getElementById('radice')).render(



 </Provider>
 </React.StrictMode>,
)

Configurare un archivio dati

L'archivio funge da archivio centrale per lo stato dell'applicazione. In genere 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. Nel src cartella, crea TodoStore.jsx file e aggiungere il codice seguente.

importare {atomo} da"Jotai";
esportarecost TodosAtom = atomo([]);

Creando ed esportando il file TodosAtom, puoi interagire comodamente e aggiornare lo stato delle cose da fare in diversi componenti dell'applicazione.

Implementare la funzionalità dell'applicazione To-Do

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

Crea un nuovo componenti/Todo.jsx file nel src directory. In questo file, aggiungi il codice seguente:

1. Importa l'archivio dati e il file usa Atom gancio.

   importare Reagisci, { useState } da'reagire';
   importare {TodosAtom} da'../TodoStore';
   importare { usaAtomo } da'Jotai';

2. Crea il componente funzionale e aggiungi gli elementi JSX.

   cost Tutto = () => {
   
   ritorno (
   
   
    segnaposto="Nuove cose da fare"
    valore={valore}
    onChange={evento => setValue (event.target.value)}
    />
   Aggiungi cose da fare</button>
   
   
    {todos.map(fare => (
   
   
    {todo.text}
    handleDelete (todo.id)}>Elimina</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };