L'API Context intégrée de React est parfaite pour le partage d'état. Découvrez comment l'utiliser avec la dernière version de Next.js.

Next.js propose plusieurs approches de gestion des états. Bien que certaines de ces méthodes nécessitent l’installation de nouvelles bibliothèques, l’API Context de React est intégrée, c’est donc un excellent moyen de réduire les dépendances externes.

Avec React Context, vous pouvez transmettre des données de manière transparente à travers différentes parties de votre arborescence de composants, éliminant ainsi les tracas liés au perçage des accessoires. Ceci est particulièrement utile pour gérer l'état global comme le statut de connexion de l'utilisateur actuel ou son thème préféré.

Comprendre l'API de contexte React

Avant de plonger dans le code, il est important de comprendre ce qu'est l'API React Context et à quel problème il répond.

Les accessoires fournissent une méthode efficace pour partager des données entre les composants. Ils vous permettent de transmettre des données d'un composant parent à ses composants enfants.

instagram viewer

Cette approche est utile car elle montre clairement quels composants utilisent certaines données et comment ces données circulent dans l'arborescence des composants.

Cependant, des problèmes surviennent lorsque vous disposez de composants profondément imbriqués qui doivent consommer les mêmes accessoires. Cette situation peut introduire des complexités et potentiellement donner lieu à un code alambiqué, plus difficile à maintenir. Ces questions, entre autres, sont les inconvénients du forage d'hélices.

React Context résout ce défi en fournissant une méthode centralisée pour créer et utiliser des données qui doivent être accessibles à l'échelle mondiale, entre les composants.

Il définit un contexte pour contenir ces données, permettant aux composants d'y accéder. Cette approche vous aide à structurer votre base de code pour garantir qu'elle est bien organisée.

Vous pouvez trouver le code de ce projet dans son GitHub dépôt.

Premiers pas avec la gestion des états dans Next.js 13 à l'aide de l'API React Context

Les composants serveur Next.js vous permettent de créer des applications qui tirent le meilleur parti des deux mondes: l'interactivité des applications côté client et les avantages en termes de performances du rendu du serveur.

Next.js 13 implémente les composants serveur dans le application répertoire - qui est désormais stable - par défaut. Cependant, étant donné que tous les composants sont rendus par le serveur, vous pouvez rencontrer des problèmes lors de l'intégration de bibliothèques côté client ou d'API telles que React Context.

Pour éviter cela, une excellente solution consiste à utiliser le client indicateur que vous pouvez définir sur les fichiers qui exécuteront du code côté client.

Pour commencer, créez un projet Next.js 13 localement en exécutant cette commande dans votre terminal :

npx create-next-app@latest next-context-api

Après avoir créé le projet, accédez à son répertoire :

cd next-context-api

Démarrez ensuite le serveur de développement :

npm run dev

Une fois que vous avez configuré un projet Next.js de base, vous pouvez créer une application de tâches de base qui utilise l'API React Context pour la gestion de l'état.

Créer le fournisseur de contexte

Le fichier du fournisseur de contexte sert de hub central où vous définissez et gérez l'état global auquel les composants doivent accéder.

Créez un nouveau fichier, src/context/Todo.context.jset remplissez-le avec le code suivant.

"use client"
import React, { createContext, useReducer } from"react";


const initialState = {
 todos: [],
};


const reducer = (state, action) => {
switch (action.type) {
case"ADD_TODO":
return { ...state, todos: [...state.todos, action.payload] };


case"DELETE_TODO":
return { ...state, todos: state.todos.filter((todo, index) =>
 index !== action.payload) };


case"EDIT_TODO":
const updatedTodos = state.todos.map((todo, index) =>
 index action.payload.index? action.payload.newTodo: todo);
return { ...state, todos: updatedTodos };


default:
return state;
 }
};


exportconst TodoContext = createContext({
 state: initialState,
 dispatch: () =>null,
});


exportconst TodoContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
return (

 {children}
 </TodoContext.Provider>
 );
};

Cette configuration de React Context définit un TodoContext qui contient initialement l'état d'une liste de tâches vide pour l'application.

En plus de créer l'état initial, cette configuration de contexte comprend un réducteur fonction qui définit différents types d’actions. Ces types d'actions modifieront l'état du contexte en fonction des actions déclenchées. Dans ce cas, les actions incluent l'ajout, la suppression et la modification de tâches.

Le TodoContextProvider composant fournit le TodoContext aux autres composants de l’application. Ce composant prend deux accessoires: le accessoire value, qui est l'état initial du contexte, et le accessoire réducteur, qui est la fonction de réduction.

Lorsqu'un composant consomme TodoContext, il peut accéder à l'état du contexte et distribuer des actions pour mettre à jour l'état.

Ajouter le fournisseur de contexte à l'application Next.js

Désormais, pour garantir que le fournisseur de contexte s'affiche à la racine de votre application Next.js et que tous les composants clients peuvent y accéder, vous devez ajouter le contexte au composant de présentation racine de l'application.

Pour ce faire, ouvrez le src/app/layout.js et enveloppez le nœud enfants dans le modèle HTML avec le fournisseur de contexte comme suit :

import'./globals.css';
import { TodoContextProvider } from"@/context/Todo.context";
exportconst metadata = {
 title: "Create Next App",
 description: "Generated by create next app",
};
exportdefaultfunctionRootLayout({
 children
}) {
return (
"en">

{children}</TodoContextProvider>
 </body>
 </html>
 );
}

Créer un composant de tâche

Créez un nouveau fichier, src/composants/Todo.js, et ajoutez-y le code suivant.

Commencez par effectuer les importations suivantes. Assurez-vous d'inclure le utiliser le client flag pour marquer ce composant comme composant côté client.

"use client"
import { TodoContext } from"@/context/Todo.context";
import React, { useContext, useState } from"react";

Ensuite, définissez le composant fonctionnel, y compris les éléments JSX qui seront affichés sur le navigateur.

exportdefaultfunctionTodo() {
return (
marginBottom: "4rem", textAlign: "center" }}>
Todos</h2>



 type="text"
 value={todoText}
 onChange={(e) => setTodoText(e.target.value)}
 style={{ marginBottom: 16}}
 placeholder="Enter a todo"
 />






    

     {state.todos.map((todo, index) => (
  • 

     {index editingIndex? (
     <>
     type="text"
     value={editedTodo}
     onChange={(e) => setEditedTodo(e.target.value)}
     />
    • 



 style={{ marginRight: 16}} 
 onClick={() => handleEditTodo(index, editedTodo)}
 >
 Save
 </button>
 </>
 ): (
 <>
 {todo}
 style={{ marginRight: 16}} 
 onClick={() => setEditingIndex(index)}
 >Edit</button>


 onClick={() => handleDeleteTodo(index)}
 >Delete</button>
 </>
 )}
 </li>
 ))}
 </ul>
 </div>
 );
}

Ce composant fonctionnel comprend des champs de saisie pour ajouter, modifier et supprimer des tâches, ainsi que les boutons correspondants. Il utilise Le rendu conditionnel de React pour afficher les boutons d'édition et de suppression en fonction de la valeur de l'index d'édition.

Enfin, définissez les variables d'état requises et les fonctions de gestionnaire requises pour chaque type d'action. Dans le composant fonction, ajoutez le code suivant.

const { state, dispatch } = useContext(TodoContext);
const [todoText, setTodoText] = useState("");
const [editingIndex, setEditingIndex] = useState(-1);
const [editedTodo, setEditedTodo] = useState("");
const handleAddTodo = () => {
if (todoText.trim() !== "") {
 dispatch({ type: "ADD_TODO", payload: todoText });
 setTodoText("");
 }
 };


const handleDeleteTodo = (index) => {
 dispatch({ type: "DELETE_TODO", payload: index });
 };
const handleEditTodo = (index, newTodo) => {
 dispatch({ type: "EDIT_TODO", payload: { index, newTodo } });
 setEditingIndex(-1);
 setEditedTodo("");
 };

Ces fonctions de gestionnaire sont chargées de gérer l'ajout, la suppression et la modification des tâches d'un utilisateur dans l'état du contexte.

Ils garantissent que lorsqu'un utilisateur ajoute, supprime ou modifie une tâche, les actions appropriées sont envoyées au réducteur du contexte pour mettre à jour l'état en conséquence.

Rendre le composant To-Do

Enfin, importez le composant To-do dans le composant page.

Pour ce faire, ouvrez le fichier page.js dans le répertoire src/app, supprimez le code passe-partout Next.js et ajoutez le code ci-dessous :

import styles from'./page.module.css'
import Todo from'../components/Todo'
exportdefaultfunctionHome() {
return (


 </main>
 )
}

Super! À ce stade, vous devriez pouvoir gérer l'état dans l'application To-do Next.js à l'aide de React Context.

Utilisation de l'API React Context avec d'autres technologies de gestion d'état

L'API React Context est une excellente solution pour la gestion des états. Néanmoins, il est possible de l'utiliser avec d'autres bibliothèques de gestion d'état comme Redux. Cette approche hybride garantit que vous utilisez le meilleur outil pour les différentes parties de votre application qui remplissent des rôles clés.

Ce faisant, vous pouvez capitaliser sur les avantages de différentes solutions de gestion d’état pour créer des applications efficaces et maintenables.