La gestione dello stato è al centro delle moderne applicazioni Web e svolge un ruolo fondamentale nella gestione dei dati degli utenti e nell'acquisizione delle loro interazioni. Che si tratti di popolare un carrello su una piattaforma di e-commerce o di mantenere una sessione utente che ha effettuato l'accesso dopo l'autenticazione, queste azioni sono rese possibili grazie a un'efficiente gestione dello stato.

In sostanza, i gestori di stato consentono alle app di accedere ed elaborare i dati per produrre i risultati desiderati. Next.js fornisce supporto per più soluzioni di gestione dello stato. Tuttavia, in questa guida, ci concentreremo sull'utilizzo di Redux Toolkit per la gestione dello stato.

Nelle applicazioni Next.js, la gestione dello stato in genere coinvolge due tipi di stati: stato globale e stato del componente. Lo stato globale contiene informazioni condivise da tutti i componenti dell'applicazione, come lo stato di autenticazione di un utente, mentre lo stato del componente memorizza i dati specifici dei singoli componenti.

Sia lo stato globale che quello dei componenti svolgono un ruolo fondamentale nella gestione dello stato complessivo dell'applicazione, facilitando una gestione efficiente dei dati.

Redux è ampiamente adottato come soluzione di gestione dello stato in tutto vari framework JavaScript. Tuttavia, può introdurre complessità, in particolare per i progetti più piccoli.

Uno svantaggio comune è la necessità di scrivere codice boilerplate ripetitivo per definire tipi di azione, creatori di azioni e riduttori. Ciò può portare a una maggiore ridondanza del codice.

Per superare queste sfide, Redux Toolkit (RTK) viene in soccorso. Mira principalmente a semplificare l'esperienza di sviluppo quando si lavora con il Libreria di gestione dello stato Redux. Fornisce una serie di strumenti e utilità che semplificano le attività Redux comuni, eliminando la necessità di un codice boilerplate eccessivo.

Ora, esaminiamo l'utilizzo di Redux Toolkit per gestire lo stato nelle applicazioni Next.js. Per iniziare, crea un progetto Next.js e installa le dipendenze richieste seguendo i passaggi seguenti.

1. Crea un nuovo progetto Next.js in locale eseguendo il comando seguente nel tuo terminale:

   npx create-next-app@latest next-redux-toolkit

2. Dopo aver creato il progetto, naviga nella directory del progetto eseguendo:

   cd next-redux-toolkit

3. Infine, installa le dipendenze necessarie nel tuo progetto utilizzando npm, il gestore di pacchetti Node.

   npm install @reduxjs/toolkit react-redux

Dopo aver impostato un progetto Next.js di base, sei pronto per creare un'applicazione demo Next.js che utilizza Redux Toolkit per la gestione dello stato.

Puoi trovare il codice di questo progetto in questo Deposito GitHub.

Configura l'archivio Redux

Un archivio Redux è un contenitore centrale che contiene l'intero stato dell'applicazione. Funge da singola origine dei dati dell'applicazione, fornendo stati a ciascun componente. Lo store è responsabile della gestione e dell'aggiornamento dello stato tramite azioni e riduttori, facilitando la gestione dello stato in tutta l'applicazione.

Per creare un negozio Redux, creane uno nuovo redux cartella nella directory principale del tuo progetto Next.js. All'interno di questa cartella, crea un nuovo file store.js file e aggiungere il seguente codice:

importare {configureStore} da'@reduxjs/toolkit';
importare profileReducer da'./reducers/profileSlice';
esportarepredefinito configureStore({
 riduttore:{
 profilo: profileReducer
 }
})

Il codice sopra utilizza configureStore funzione per creare e configurare l'archivio Redux. La configurazione del negozio include la specifica di riduttori utilizzando il file riduttore oggetto.

I riduttori, in questo caso, specificano come deve cambiare lo stato dell'applicazione in risposta a particolari azioni o eventi specificati. In questo esempio, il profilo reducer è responsabile della gestione delle azioni relative allo stato del profilo.

Impostando l'archivio Redux, il codice stabilisce la struttura di base per la gestione dello stato dell'applicazione utilizzando Redux Toolkit.

Definisci sezioni di stato

Le sezioni di stato redux sono componenti che incapsulano la logica per la gestione dello stato di elementi di dati specifici all'interno dell'archivio redux configurato. Queste sezioni vengono create utilizzando il file createSlice funzione, che genera automaticamente il riduttore, i creatori di azioni e i tipi di azione per la sezione.

Nel redux directory, creare una nuova cartella e assegnargli un nome riduttori. All'interno di questa cartella, create profileSlice.js file e aggiungere il seguente codice.

importare {createSlice} da'@reduxjs/toolkit';
cost profileSlice = createSlice({
 nome: 'profilo',
 stato iniziale: {
 nome: 'nessuno'
 },
 riduttori: {
 IMPOSTA NOME: (stato, azione) => {
 state.name = action.payload
 }
}})
esportarecost {SET_NAME} = profileSlice.actions;
esportarepredefinito profileSlice.reducer;

Nel codice fornito, il createSlice La funzione crea una sezione di stato per lo stato del profilo utente. IL profiloSlice oggetto include il nome della sezione e il suo stato iniziale, che contiene i valori predefiniti per le proprietà dello stato.

Inoltre, l'oggetto slice accetta anche un file riduttori proprietà che definisce i gestori di azione per questa sezione. In questo caso, una singola funzione riduttore denominata IMPOSTA NOME. In sostanza, una volta chiamata questa funzione, aggiornerà la proprietà name dello stato con i dati forniti.

IL createSlice La funzione genera automaticamente creatori di azioni e tipi di azioni in base ai riduttori definiti. L'esportato IMPOSTA NOME creatore di azioni e profileSlice.reducer rappresenta il creatore dell'azione generata e la funzione di riduzione per la sezione del profilo.

Creando questa sezione di stato, i componenti all'interno dell'applicazione possono utilizzare il file IMPOSTA NOME azione e passare il payload desiderato per aggiornare il nome del profilo nello stato.

Creare un componente per testare la funzionalità di gestione dello stato di RTK

Apri il index.js file nel pagine directory, eliminare il codice boilerplate Next.js e aggiungere il codice seguente.

importare stili da'@/styles/Home.module.css'
importare {useRef} da'reagire'
importare {useSelector, useDispatch} da'reazione redux'
importare {IMPOSTA NOME} da'../../redux/reducers/profileSlice'
funzioneNome da visualizzare(){
cost {nome} = useSelector((stato) => stato.profilo)
ritorno (

 Sono {nome} !!</h1> 
 ) }
esportarepredefinitofunzioneCasa() {
cost nomeInput = useRef()
cost spedizione = useDispatch()
funzionesubmitName() {
consolare.log (inputName.current.value)
 invio (SET_NAME(inputName.current.value))
 }
ritorno (
 <>

'Inserisci il nome' ref={inputName} />
Inserisci il nome</button>

 </main>
 </>
 )}

Il codice sopra crea e visualizza un componente Next.js che consente all'utente di inserire un nome e visualizzare il nome fornito nella pagina del browser. In modo efficace, gestendo lo stato dell'applicazione utilizzando Redux Toolkit.

IL Nome da visualizzare componente utilizza il useSelector gancio per accedere al nome property dallo stato del profilo nell'archivio Redux e ne esegue il rendering nella pagina.

Per inserire un nome, un utente fa clic su Inserisci il nome pulsante. Questo richiama il submitName funzione, che invia il file IMPOSTA NOME azione con il valore di input come payload. Questa azione aggiorna la proprietà name nello stato del profilo.

Aggiorna il file _app.js

Infine, per configurare Redux Toolkit per l'utilizzo nell'intera applicazione Next.js, è necessario avvolgere l'applicazione con il file Provider Redux: garantisce che l'archivio Redux e gli stati disponibili siano accessibili a tutti i componenti nel file applicazione.

Apri il _app.js file e aggiornarlo come segue:

importare {Fornitore} da'reazione redux'
importare negozio da'../../redux/archivio'
esportarepredefinitofunzioneApp({Componente, pageProps}) {
ritorno (


 </Fornitore> )
}

Ora vai avanti e avvia il server di sviluppo per riflettere le modifiche apportate e vai a http://localhost: 3000 nel browser per testare l'applicazione.

npm esegue lo sviluppo

Gestione della reidratazione dei dati al ricaricamento della pagina

La reidratazione dei dati al ricaricamento della pagina si riferisce al processo di ripristino e inizializzazione dello stato dell'applicazione quando una pagina viene ricaricata. In un'applicazione Next.js con rendering del server, lo stato iniziale viene prima visualizzato sul server e quindi inviato al client.

Sul client, il codice JavaScript è responsabile della ricostruzione dello stato dell'applicazione recuperando e deserializzando lo stato serializzato ricevuto dal server.

In questo modo, l'applicazione può ripristinare senza problemi i dati necessari e preservare la sessione dell'utente. Questo approccio evita il recupero di dati non necessari e garantisce un'esperienza utente ininterrotta durante la navigazione tra le pagine o il ricaricamento dell'applicazione.

Uno dei vantaggi dell'utilizzo di Redux Toolkit nelle applicazioni Next.js è la sua semplicità e le funzionalità a misura di sviluppatore. Riduce significativamente il codice boilerplate richiesto per la definizione di azioni, riduttori e configurazione del negozio, rendendo più semplice ed efficiente lavorare con Redux nella gestione dello stato.