La gestion des états est au cœur des applications Web modernes, jouant un rôle essentiel dans la gestion des données des utilisateurs et la capture de leurs interactions. Qu'il s'agisse de remplir un panier sur une plate-forme de commerce électronique ou de maintenir une session utilisateur connectée après authentification, ces actions sont rendues possibles grâce à une gestion efficace de l'état.

Essentiellement, les gestionnaires d'état permettent aux applications d'accéder aux données et de les traiter pour produire les résultats souhaités. Next.js prend en charge plusieurs solutions de gestion d'état. Cependant, dans ce guide, nous nous concentrerons sur l'utilisation de Redux Toolkit pour la gestion de l'état.

Dans les applications Next.js, la gestion des états implique généralement deux types d'états: l'état global et l'état des composants. L'état global contient des informations partagées par tous les composants de l'application, telles que l'état d'authentification d'un utilisateur, tandis que l'état du composant stocke des données spécifiques aux composants individuels.

L'état global et l'état des composants jouent un rôle essentiel dans la gestion de l'état global de l'application, facilitant une gestion efficace des données.

Redux est largement adopté comme solution de gestion d'état à travers divers frameworks JavaScript. Cependant, cela peut introduire des complexités, en particulier pour les petits projets.

Un inconvénient courant est la nécessité d'écrire du code passe-partout répétitif pour définir les types d'action, les créateurs d'action et les réducteurs. Cela peut entraîner une redondance accrue du code.

Pour surmonter ces défis, Boîte à outils Redux (RTK) vient à la rescousse. Il vise principalement à rationaliser l'expérience de développement lorsque vous travaillez avec le Bibliothèque de gestion d'état Redux. Il fournit un ensemble d'outils et d'utilitaires qui simplifient les tâches Redux courantes, éliminant ainsi le besoin d'un code passe-partout excessif.

Passons maintenant à l'utilisation de Redux Toolkit pour gérer l'état dans les applications Next.js. Pour commencer, créez un projet Next.js et installez les dépendances requises en suivant les étapes ci-dessous.

1. Créez un nouveau projet Next.js localement en exécutant la commande ci-dessous dans votre terminal :

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

2. Après avoir créé le projet, accédez au répertoire du projet en exécutant :

   cd next-redux-toolkit

3. Enfin, installez les dépendances nécessaires dans votre projet en utilisant npm, le gestionnaire de paquets Node.

   npm installer @reduxjs/toolkit réagir-redux

Une fois que vous avez configuré un projet Next.js de base, vous êtes maintenant prêt à créer une application Next.js de démonstration qui utilise Redux Toolkit pour la gestion de l'état.

Vous pouvez trouver le code de ce projet dans ce Référentiel GitHub.

Configurer le magasin Redux

Un magasin Redux est un conteneur central qui contient l'intégralité de l'état de l'application. Il sert de source unique des données de l'application, fournissant des états à chaque composant. Le magasin est responsable de la gestion et de la mise à jour de l'état par le biais d'actions et de réducteurs, ce qui facilite la gestion de l'état dans toute l'application.

Pour construire un magasin Redux, créez un nouveau redux dossier dans le répertoire racine de votre projet Next.js. Dans ce dossier, créez un nouveau store.js fichier et ajoutez le code suivant :

importer {configureStore} depuis'@reduxjs/boîte à outils';
importer profileReducer depuis'./reducers/profileSlice';
exporterdéfaut configureStore({
 réducteur :{
 profil: profileReducer
 }
})

Le code ci-dessus utilise configureStore fonction pour créer et configurer le magasin Redux. La configuration du magasin inclut la spécification des réducteurs à l'aide de la réducteur objet.

Les réducteurs, dans ce cas, spécifient comment l'état de l'application doit changer en réponse à des actions particulières ou à des événements spécifiés. Dans cet exemple, le profil reducer est responsable de la gestion des actions liées à l'état du profil.

En configurant le magasin Redux, le code établit la structure de base pour gérer l'état de l'application à l'aide de Redux Toolkit.

Définir les tranches d'état

Les tranches d'état Redux sont des composants qui encapsulent la logique de gestion de l'état d'éléments de données spécifiques dans le magasin Redux configuré. Ces tranches sont créées à l'aide de la créerSlice qui génère automatiquement le réducteur, les créateurs d'action et les types d'action pour la tranche.

Dans le redux répertoire, créez un nouveau dossier et nommez-le réducteurs. Dans ce dossier, créez profileSlice.js fichier et ajoutez le code suivant.

importer {createSlice} depuis'@reduxjs/boîte à outils';
constante profileSlice = createSlice({
 nom: 'profil',
 Etat initial: {
 nom: 'aucun'
 },
 réducteurs: {
 SET_NAME: (état, acte) => {
 state.name = action.payload
 }
}})
exporterconstante {SET_NAME} = profileSlice.actions ;
exporterdéfaut profileSlice.reducer ;

Dans le code fourni, le créerSlice La fonction crée une tranche d'état pour l'état du profil utilisateur. Le profileSlice l'objet inclut le nom de la tranche et son Etat initial, qui contient les valeurs par défaut des propriétés d'état.

De plus, l'objet tranche prend également un réducteurs propriété qui définit les gestionnaires d'action pour cette tranche. Dans ce cas, une seule fonction de réduction nommée SET_NAME. Essentiellement, une fois que vous appelez cette fonction, elle mettra à jour la propriété name de l'état avec les données fournies.

Le créerSlice La fonction génère automatiquement des créateurs d'action et des types d'action en fonction des réducteurs définis. L'export SET_NAME créateur d'action et profileSlice.reducer représente le créateur d'action généré et la fonction de réduction pour la tranche de profil.

En créant cette tranche d'état, les composants de l'application peuvent utiliser le SET_NAME action et transmettez la charge utile souhaitée pour mettre à jour le nom du profil dans l'état.

Créer un composant pour tester la fonctionnalité de gestion d'état de RTK

Ouvrez le index.js dossier dans le pages répertoire, supprimez le code passe-partout Next.js et ajoutez le code suivant.

importer modes depuis'@/styles/Accueil.module.css'
importer {useRef} depuis'réagir'
importer {useSelector, useDispatch} depuis'réagir-redux'
importer {SET_NAME} depuis'../../redux/reducers/profileSlice'
fonctionAfficher un nom(){
constante {nom} = useSelector((État) => état.profil)
retour (

 Je suis {nom} !!</h1> 
 ) }
exporterdéfautfonctionMaison() {
constante inputName = useRef()
constante dispatch = useDispatch()
fonctionsubmitName() {
console.log (inputName.current.value)
 dispatch (SET_NAME(inputName.current.value))
 }
retour (
 <>

'entrez le nom' ref={inputName} />
Entrez le nom</button>

 </main>
 </>
 )}

Le code ci-dessus crée et restitue un composant Next.js qui permet à l'utilisateur d'entrer un nom et d'afficher le nom fourni sur la page du navigateur. Gérer efficacement l'état de l'application à l'aide de Redux Toolkit.

Le Afficher un nom composant utilise le useSelector crochet pour accéder au nom propriété de l'état du profil dans le magasin Redux et l'affiche sur la page.

Pour entrer un nom, un utilisateur clique sur le Entrez le nom bouton. Cela invoque le submitName fonction, qui distribue le SET_NAME action avec la valeur d'entrée comme charge utile. Cette action met à jour la propriété name dans l'état du profil.

Mettre à jour le fichier _app.js

Enfin, pour configurer Redux Toolkit à utiliser dans l'intégralité de l'application Next.js, vous devez envelopper l'application avec le Fournisseur Redux: cela garantit que le magasin Redux et les états disponibles sont accessibles à tous les composants du application.

Ouvrez le _app.js fichier et mettez-le à jour comme suit :

importer {Fournisseur} depuis'réagir-redux'
importer magasin depuis'../../redux/store'
exporterdéfautfonctionApplication({ Composant, pageProps }) {
retour (


 </Fournisseur> )
}

Maintenant, allez-y et démarrez le serveur de développement pour refléter les modifications que vous avez apportées, et accédez à http://localhost: 3000 dans votre navigateur pour tester l'application.

npm run dev

Gestion de la réhydratation des données lors du rechargement de la page

La réhydratation des données au rechargement de la page fait référence au processus de restauration et d'initialisation de l'état de l'application lorsqu'une page se recharge. Dans une application Next.js rendue par le serveur, l'état initial est d'abord rendu sur le serveur, puis envoyé au client.

Sur le client, le code JavaScript est chargé de reconstruire l'état de l'application en récupérant et en désérialisant l'état sérialisé reçu du serveur.

Ce faisant, l'application peut restaurer de manière transparente les données nécessaires et préserver la session de l'utilisateur. Cette approche évite la récupération inutile de données et garantit une expérience utilisateur ininterrompue lors de la navigation entre les pages ou du rechargement de l'application.

L'un des avantages de l'utilisation de Redux Toolkit dans les applications Next.js est sa simplicité et ses fonctionnalités conviviales pour les développeurs. Il réduit considérablement le code passe-partout requis pour définir les actions, les réducteurs et la configuration du magasin, ce qui facilite et rend plus efficace le travail avec Redux dans la gestion des états.