Lors de la gestion d'états complexes dans une application Next, les choses peuvent rapidement se compliquer. Les crochets traditionnels comme useState aide à la gestion de l'État mais présente un problème de forage d'hélices. Le forage d'accessoires signifie transmettre des données ou des fonctions à travers plusieurs composants.

Une meilleure approche consisterait à séparer votre logique de gestion des états des composants et à mettre à jour ces états depuis n'importe où dans votre application. Nous vous expliquerons comment utiliser l'API de contexte pendant que nous construisons une simple application de liste de tâches.

Avant de commencer votre liste de tâches

Avant de pouvoir créer l'application de liste de tâches, vous aurez besoin :

  • Connaissance de base de opérateurs JavaScript modernes et Crochet useState de React.
  • Une compréhension de la façon de déstructurer des tableaux et des objets en JavaScript.
  • Nœud v16.8 ou version ultérieure installée sur votre machine locale et familiarité avec gestionnaires de paquets comme npm ou fil.
instagram viewer

Vous pouvez trouver le projet fini sur GitHub pour référence et exploration ultérieure.

Présentation de l'état et de la gestion des applications

L'état de l'application fait référence à l'état actuel d'une application à un moment donné. Cela inclut les informations que l'application connaît et gère, telles que les entrées de l'utilisateur et les données extraites d'une base de données ou d'une API (Application Programming Interface).

Pour comprendre l'état de l'application, considérez les états possibles d'une simple application de compteur. Ils comprennent:

  • L'état par défaut lorsque le compteur est à zéro.
  • Un état accru lorsque le compteur augmente de un.
  • Un état diminué lorsque le compteur diminue de un.
  • Un état de réinitialisation lorsque le compteur revient à son état par défaut.

Un composant React peut s'abonner aux changements d'état. Lorsqu'un utilisateur interagit avec un tel composant, ses actions, telles que les clics de bouton, peuvent gérer les mises à jour de l'état.

Cet extrait montre une application de compteur simple, dans son état par défaut, qui gère l'état en fonction des actions de clic :

constante [compteur, setCounter] = useState(0);
retour (

{compteur}</h1>

Configuration et installation

Le référentiel du projet contient deux branches: entrée et contexte. Vous pouvez utiliser la branche de démarrage comme base pour créer le projet ou la branche de contexte pour prévisualiser la démo finale.

Clonage de l'application de démarrage

L'application de démarrage fournit l'interface utilisateur dont vous aurez besoin pour l'application finale, afin que vous puissiez vous concentrer sur la mise en œuvre de la logique de base. Ouvrez un terminal et exécutez la commande suivante pour cloner la branche starter du référentiel sur votre machine locale :

git cloner -b démarreur https://github.com/makeuseofcode/Next.js-CRUD-todo-app.git

Exécutez la commande suivante, dans le répertoire du projet, pour installer les dépendances et démarrer votre serveur de développement :

fil et fil dev

Ou:

npm i && npm run dev

Si tout s'est bien passé, l'interface utilisateur devrait s'afficher dans votre navigateur :

Mise en œuvre de la logique

L'API de contexte fournit un moyen de gérer et de partager les données d'état entre les composants, sans avoir besoin de forage manuel des accessoires.

Étape 1: Créer et exporter un contexte

Créer un src/app/contexte dossier pour stocker le fichier de contexte et garder le répertoire du projet bien organisé. Dans ce dossier, créez un todo.context.jsx fichier qui contiendra toute la logique de contexte pour l'application.

Importez le createContext fonction de la réagir bibliothèque et appelez-la, en stockant le résultat dans une variable :

importer { créerContext} depuis"réagir";
constante TodoContext = createContext();

Ensuite, créez un personnalisé useTodoContextuseTodoContext crochet qui revient TodoContext sous sa forme utilisable.

exporterconstante useTodoContext = () => useContext (TodoContext);

Étape 2: créer et gérer des états

Pour réaliser les actions CRUD (Créer, Lire, Mettre à jour, Supprimer) de l'application, vous devrez créer les états et les gérer avec l'outil Fournisseur composant.

constante TodoContextProvider = ({ enfants }) => {
constante [tâche, setTask] = useState("");
constante [tâches, setTasks] = useState([]);
retour<TodoContext. Fournisseurvaleur={{}}>{enfants}TodoContext. Fournisseur>;
};
exporterdéfaut TodoContextProvider ;

Juste avant le retour déclaration, créez une handleTodoInput fonction qui s'exécutera lorsque l'utilisateur saisira une tâche. Cette fonction met alors à jour le tâche État.

constante handleTodoInput = (saisir) => setTask (entrée);

Ajouter un créerTâche fonction qui s'exécutera lorsqu'un utilisateur soumettra une tâche. Cette fonction met à jour le Tâches et attribue à la nouvelle tâche un ID aléatoire.

constante créerTâche = (e) => {
 e.preventDefault();
 setTâches([
 {
 identifiant: Mathématiques.trunc(Mathématiques.aléatoire() * 1000 + 1),
 tâche,
 },
 ...Tâches,
 ]);
 };

Créé un mise à jourTâche fonction qui mappe à travers le Tâches liste et met à jour la tâche dont l'ID correspond à l'ID de la tâche cliquée.

constante updateTask = (id, texte de mise à jour) =>
 setTasks (tasks.map((t) => (t.id id? { ...t, tâche: updateText }: t)));

Créer un supprimerTâche fonction qui met à jour Tâches list afin qu'elle inclue toutes les tâches dont l'ID ne correspond pas au paramètre donné.

constante supprimerTâche = (identifiant) => setTasks (tasks.filter((t) => t.id !== id));

Étape 3: Ajouter des états et des gestionnaires au fournisseur

Maintenant que vous avez créé les états et écrit le code pour les gérer, vous devez rendre ces états et ces fonctions de gestion disponibles pour le Fournisseur. Vous pouvez les fournir sous la forme d'un objet, en utilisant le valeur propriété de la Fournisseur composant.

retour (
 valeur={{
 tâche,
 Tâches,
 handleTodoInput,
 créerTâche,
 tâche de mise à jour,
 supprimerTâche,
 }}
 >
 {enfants}
 </TodoContext.Provider>
);

Étape 4: Délimitez le contexte

Le Fournisseur que vous avez créé doit encapsuler le composant de niveau supérieur pour rendre le contexte disponible pour l'ensemble de l'application. Pour ce faire, éditez src/app/page.jsx et envelopper le À faire composant avec le TodoContextProvider composant:


;
</TodoContextProvider>;

Étape 5: Utiliser le contexte dans les composants

Modifiez votre src/app/components/Todos.jsx archiver et déstructurer tâches, tâche, handleTodoInput, et créerTâche via un appel au useTodoContextuseTodoContext fonction.

constante { tâche, tâches, handleTodoInput, createTask } = useTodoContext();

Maintenant, mettez à jour l'élément de formulaire pour gérer l'événement submit et les modifications apportées au champ de saisie principal :

 créerTâche(e)}>
"todo-input" taper="texte" espace réservé="Saisir une tâche" valeur requise={task} onChange={(e) => handleTodoInput (e.target.value)} />
"soumettre à faire" taper="soumettre" valeur="Ajouter une tâche" />
</form>

Étape 6: Rendu des tâches dans l'interface utilisateur

Vous pouvez maintenant utiliser l'application pour créer et ajouter une tâche au Tâches liste. Pour mettre à jour l'affichage, vous devrez cartographier les Tâches et affichez-les dans l'interface utilisateur. Tout d'abord, créez un src/app/components/Todo.jsx composant pour contenir un seul élément à faire.

Au sein de la src/app/components/Todo.jsx composant, modifier ou supprimer une tâche en appelant le mise à jourTâche et supprimerTâche fonctions que nous avons créées dans src/app/context/todo.context.jsx déposer.

importer Réagissez, { useState } depuis"réagir";
importer { useTodoContext } depuis"../context/todo.context";
constante À faire = ({ tâche }) => {
constante { updateTask, deleteTask } = useTodoContext();


// l'état isEdit suit lorsqu'une tâche est en mode édition
constante [isEdit, setIsEdit] = useState(FAUX);


retour (

"todo-wrapper">


 {estModifier? ( <saisirtaper="texte"valeur={tâche.tâche}
 onChange={(e) => updateTask (task.id, e.target.value)} /> ) :
 (<enom du cours="tâche">{tâche.tâche}e> )}



"Actions">






exporterdéfaut Faire;

Pour rendre le src/app/components/Todo.jsx composant pour chaque tâche, allez dans le src/app/components/Todos.jsx fichier et mapper conditionnellement via le Tâches juste après le entête balise fermante.

{Tâches && (

 {tâches.map((tâche, je) => ( <Faireclé={je}tâche={tâche} /> ))}
</main>
)}

Testez votre application dans un navigateur et confirmez qu'elle donne le résultat attendu.

Enregistrement des tâches dans le stockage local

Actuellement, l'actualisation de la page réinitialisera les tâches, supprimant celles que vous avez créées. Une façon de résoudre ce problème consiste à stocker les tâches dans le stockage local du navigateur.

L'API de stockage Web est une amélioration du stockage des cookies, avec des fonctionnalités qui améliorent l'expérience des utilisateurs et des développeurs.