Comment remplacer Redux par des crochets React et l'API de contexte React

Ce tutoriel démontre une approche moderne pour réagir la gestion de l'État à l'aide de crochets et de l'API de contexte, offrant une alternative rationalisée à Redux pour de nombreuses applications. Nous explorerons comment gérer efficacement les états locaux et globaux, minimisant le code de la poignée et les dépendances de bibliothèque inutiles.

Avantages clés:

• Réduction du chaudr-plaque: Évitez le code verbeux souvent associé à redux.
• Amélioration de la lisibilité: Le code plus propre, plus concis améliore la maintenabilité.
• Partage d'état simplifié: Partagez sans effort l'état entre les composants sans forage des accessoires.
• Réutilisabilité améliorée: Promouvoir la réutilisation du code via des composants et des crochets fonctionnels.

Prérequis:

La familiarité avec React, les crochets de réaction et une compréhension de base des concepts redux (réducteurs et actions) sont supposées. Les exemples utilisent la réaction de l'interface utilisateur sémantique pour le style, mais cela est facultatif. Le code de projet complet est disponible sur github [lien vers le repo github].

Stratégies de gestion de l'État:

Nous aborderons deux types d'états fondamentaux:

• État local: spécifique aux composants individuels, gérés à l'aide de useState pour des valeurs simples (nombres, chaînes) ou useReducer pour des structures plus complexes. useState fournit une fonction simple setValue(), tandis que useReducer nécessite de définir les fonctions pour modifier des valeurs d'état spécifiques dans un objet plus grand.

• État global: partagé sur plusieurs composants, implémentés à l'aide de l'API de contexte. Cela implique la création d'un objet de contexte (createContext) et d'un composant de fournisseur pour envelopper les composants des consommateurs. Les composants enfants accèdent au contexte à l'aide du useContext crochet.

Exemple 1: Compteur simple avec useState

Cet exemple construit un compteur avec des boutons d'incrément et de décrémentation. La valeur du comptoir est gérée comme état global en utilisant un contexte.

1. context/counter-context.js: définit les CounterContext et CounterContextProvider.

2. components/counter-display.js: Affiche la valeur du compteur en utilisant useContext.

3. components/counter-buttons.js: contient des boutons à incrémentation / décrément, en utilisant useContext pour mettre à jour l'état.

4. views/counter-view.js: Enveloppe les composants d'affichage et de bouton avec CounterContextProvider.

5. App.js: rend le CounterView.

Exemple 2: Contactez la gestion avec useReducer

Cet exemple plus avancé démontre une application crud (créer, lire, mettre à jour, supprimer) pour la gestion des contacts. L'État est plus complexe, nécessitant useReducer pour une gestion efficace.

1. context/contact-context.js: définit la fonction ContactContext, initialState, et la fonction reducer pour gérer différentes actions (ajouter, supprimer).

2. views/contact-view.js: Le composant de conteneur, enveloppe la forme et la table avec ContactContextProvider.

3. components/contact-table.js: Affiche la liste de contacts et gère la suppression à l'aide de useContext et une variable d'état locale pour suivre les lignes sélectionnées.

4. components/contact-form.js: un formulaire pour ajouter de nouveaux contacts, en utilisant useContext pour expédier des actions. Un crochet personnalisé simplifie la gestion des formulaires. useFormInput

5. : App.js rend le . ContactView

redux vs crochets et contexte:

Bien que cette approche simplifie la gestion de l'État pour de nombreux projets, Redux reste précieux pour les applications à grande échelle en raison de ses outils de développement robustes et de sa prise en charge de middleware. Le choix dépend de la complexité du projet et de la familiarité de l'équipe. Pour les projets de taille plus petite à moyenne, la combinaison de crochets React et l'API de contexte offre une alternative convaincante et moins complexe.

Questions fréquemment posées (FAQ):

La section FAQ fournie est complète et bien structurée, couvrant les aspects clés des crochets React et de l'API de contexte, y compris leur utilisation, les meilleures pratiques et les comparaisons avec d'autres solutions de gestion de l'État. Cette section répond efficacement aux questions et préoccupations communes des développeurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!