Conseils sur la manière de travailler avec React, Redux, Reselect et Redux Saga

Cet article s’adresse aux personnes qui commencent à peine à adopter ReactJS, Redux, Reselect et Redux Sagas afin d’améliorer la gestion de leur travail quotidien avec ces bibliothèques.

Après avoir appris les quatre, la plupart des développeurs ont du mal à savoir quoi faire avec ces bibliothèques, par quoi puis-je commencer quand j'ai besoin de composer un composant.

J'ai eu plusieurs fois le problème avec ce problème avant de comprendre les motifs (je ne suis pas malin). Voici ce que je fais depuis un mois:

Sauter entre des choses comme des fous

J’ai d’abord analysé les besoins et le design et décidé de créer un composant réactif, puis j’ai sauté dedans.

J’ai écrit un composant, puis j’ai réalisé que je devais le relier à une sorte d’accessoires (propriétés) que je ne connaissais pas tout à fait de ce qu’ils étaient pour le moment.

J'ai créé les accessoires, puis je me suis rendu compte que si je le faisais, il s’agit d’un composant conteneur (composant qui assume la responsabilité de la connexion au magasin pour les accessoires).

Je dois donc créer un autre composant de présentation (composant de rendu ui).

Certaines actions doivent ensuite être envoyées à partir du composant conteneur, puis je crée des actions, mais les actions doivent avoir une constante prédéfinie (je ne veux pas expliquer pourquoi il est nécessaire de définir constante ici).

Beaucoup de sauts avant d'arriver à un état presque fini. En ce moment, j’ai manqué des actions et l’état qui doit être défini, puis je reviens en arrière. C’est un processus douloureux, j’aiderai donc certains débutants à prendre un bon départ.

Roi du saut :)

Astuce pour éviter d'être une grenouille, et aller régulièrement.

Tout d'abord, vous devez faire la distinction entre composant conteneur et composant de présentation

# Composant conteneur

Gérera la connexion de données entre le magasin et son enfant.

N'aura pas sa propre présentation, ne contient que d'autres composants de présentation

Goodpoint: La séparation de la logique des données pour le composant de présentation a plus de chances d’être réutilisée.

# Composant de présentation

Ne rendra que les données qui lui sont transmises -. peut facilement être réutilisé ailleurs.

Deuxièmement, traiter avec chacun d'eux

# Traitement du composant conteneur

  1. A partir des exigences, pensez à toutes les actions possibles et informations nécessaires pour le composant.
  2. Définissez les données d'entrée du composant conteneur.
  3. Définissez le nom des actions comme constant.
  4. Créer une action en associant des données d'objet (la façon de concevoir les données d'action est en discussion).
  5. S'il est nécessaire d'appeler une API, nous devons créer une saga. Sinon, ignorez de créer Saga.
  6. Créer une saga: Créer un observateur (surveiller la condition d'action du déclencheur) et un agent pour gérer les appels d'API. Créez des mutateurs de données pour transformer les données de réponse en notre forme souhaitée.
  7. S'il n'y a pas d'appel d'API (effets secondaires), alors nous pouvons continuer avec des réducteurs.
  8. Réducteur: concevez l’état initial du réducteur, définissez une logique pour gérer les données avant de les appliquer au magasin principal.
  9. Définissez des sélecteurs pour sélectionner les données nécessaires ou les éléments de données traités pour les composants. Ceci permet de mettre les données en mémoire cache pour le composant au cas où nous en aurions besoin.
  10. Transmettez toutes les données nécessaires aux accessoires du composant conteneur via la méthode connect de redux, connect, 'bindActionCreators',…
  11. Rendez le composant Présentation à l'intérieur du composant conteneur si nécessaire.

# Traitement de la composante présentation

  1. Sur la base de l'exigence, définissez les données nécessaires au rendu de ce composant.
  2. Recevez les accessoires du composant parent ou du composant conteneur.

Je ne promets pas que cela effacera complètement votre douleur, mais au moins cela aide à réduire le temps nécessaire pour sauter.

Merci d'avoir lu.