Guide du débutant pour réagir / réduire les problèmes - comment commencer à apprendre sans être submergé

Photo de Roman Mager sur Unsplash

Avertissement: Ceci est un guide pour débutant écrit par un débutant de React / Redux.

Apprendre un nouveau framework Javascript en 2017 peut être une tâche ardue. Supposons que vous ayez finalement rattrapé Angular, mais tout le monde est passé à ce nouvel élément brillant appelé React. Vous avez lu quelques tutoriels et vous ne pouvez pas attendre pour configurer votre nouveau projet React. Attendez, un autre article indique que vous devez utiliser Redux pour gérer l’état de votre nouvelle application. Les débutants peuvent tous se rapporter à cet article. Je me considère comme un développeur intermédiaire et je me sens toujours comme ça.

Lorsque j'ai essayé de démarrer mon projet React / Redux, j'ai parcouru d'innombrables articles sur la structuration de mon répertoire de fichiers: fichiers regroupés par type, regroupés par composants, regroupés par domaine, etc.

source: http://gph.is/2k9DFT4

J'ai réalisé que je devais commencer quelque part. Le moment aha viendrait plus tard. Ce faisant, je comprendrais les avantages et les inconvénients de chaque approche. Cela peut être suivi d’une refactorisation pénible, mais ce sera une leçon précieuse apprise. Et je construisais pour apprendre de toute façon.

Étape 1: Choisissez une approche avisée et respectez-la

J'ai suivi ce tutoriel.

Mon approche d’apprentissage consistait à commencer à coder ma propre application en suivant le processus de réflexion de l’auteur. Je trouve que cet article est l’un des tutoriels les plus utiles qui soient. Cela peut encore être trop pour quelqu'un qui commence dans React / Redux, j'ai donc documenté mon parcours et en ai fait une version allégée du tutoriel.

Étape 2: Commencez petit

Mon objectif était très simple au début: afficher une liste des articles que je collectionnais avec une application de regroupement de nouvelles. La réponse de la base de données de nouvelles va être une collection d'articles avec la structure de données suivante.

Rendre une liste d'articles sur Ethereum

Étape 3: Choisissez un passe-partout

J'ai utilisé le passe-partout créé par mes adorables instructeurs de la Fullstack Academy (je n'ai pas suivi le train React / Redux. Ma cohorte est la dernière à apprendre AngularJS). front end et Express / Sequelize / PostgreSQL pour le backend. Pour les besoins de cet exercice, j’ai un peu nettoyé le passe-partout pour les personnes sans Express / Sequelize / PostgreSQL. Nous ne travaillerons qu’avec React / Redux à partir de maintenant.

Voici le référentiel contenant le point de départ et le code terminé pour cet exercice.

Ceci est la structure du fichier.

src /
  Composants/
    ListView.js
    ListRow.js
  conteneurs /
    ArticlesIndex.js
  prestations de service/
    articles.js
  le magasin/
    des articles/
      actions.js
      actionTypes.js
      réducteur.js
    index.js

Avant de suivre ce didacticiel, si des termes comme action et réducteur ne vous disent rien, je vous recommande vivement de lire le concept de base de la documentation officielle de Redux ou l'article que j'ai écrit:

Étape 4: Commencez avec l'état Redux

Quel est l'état de notre application? Nous parlons d’une application simple d’une page avec une liste d’articles. Nous devons stocker la liste des articles extraits du serveur. Si vous jetez un coup d'œil au articles.js dans src / services / articles, vous verrez un tableau rempli d'articles. Le but de cet exercice étant de vous familiariser avec le flux de données de l'architecture React / Redux, la fonction getAllArticles () renvoie directement les articles dont vous avez besoin. Dans le monde réel, cette fonction sera un appel asynchrone à une API distante.

Maintenant, la question est de savoir comment structurer notre état. La réponse du serveur (ou dans ce cas, de la fonction getAllArticles) est un tableau d'objets. Nous pouvons le mettre dans notre état.

Mais est-ce la meilleure façon de modéliser l'état? Considérez le scénario dans lequel vous devez mettre à jour une entrée d'article, l'application va parcourir le tableau pour trouver les nouvelles que vous recherchez. Et si la taille du tableau est vraiment grande? Cette approche ne sera pas très performante.

Si nous structurons notre état avec un objet, l'accès à un article devient une recherche. Pour rendre des articles, nous pouvons stocker un tableau supplémentaire d'identifiants.

Étape 5: implémentez le flux de données pour votre état du début à la fin

Comment mettons-nous à jour cet état? C’est là que l’action et le réducteur entrent en jeu. Considérez cet organigramme:

Quelle est notre interaction utilisateur? Nous souhaitons afficher la liste des articles au chargement de la page pour éviter toute interaction. Pour ce faire, nous commençons par composantDidMount en vue React. Nous pouvons envoyer une action pour récupérer des articles et en informer le réducteur. Le réducteur évaluera l'action et mettra à jour l'état. L'état mis à jour déclenchera le rendu du composant.

Commençons par définir le type d’actions de notre application. C’est une définition simple et constante pour aller chercher des articles. Plus tard, nous pourrons toujours ajouter d'autres définitions, telles que la mise à jour ou la suppression d'une entrée.

Maintenant passons à l’action. Rappelez-vous que la réponse que nous recevons du backend est un tableau d'objets, nous le transformons en objet à l'aide de la fonction lodash keyBy.

Le réducteur évalue l'objet brut contenant le type d'action et sa charge utile. Il stocke ensuite les données dans l'état.

Étape 6: rendu

Nous allons connecter un conteneur appelé ArticleIndex à l'état de l'article. AritcleIndex est un conteneur intelligent pouvant communiquer avec le magasin Redux. Dans ArticleIndex, il existe un composant stupide appelé ListView, écrit par Tal Kol, l'auteur du tutoriel Redux que j'ai suivi. Vous pouvez vérifier l'implémentation dans le dossier des composants.

ListView prend articlesById, un tableau d'identifiants d'articles et une fonction de rendu. Il rend ensuite la liste des articles.

Comment pouvons-nous obtenir articlesById et un tableau d'identifiants d'articles à afficher? Voici un aperçu du concept de base de Redux. La vue React est connectée à l’état Redux via la fonction de connexion fournie par la bibliothèque react-redux.

Voici le code qui fait ce que décrit ce diagramme. Au bas de celui-ci, nous cartographions l'état Redux et l'envoyons aux accessoires React. Dans composantDidMount, nous appelons loadArticles, qui distribue l'action fetchAllArticles. Une fois que l'état est mis à jour avec des articles, articlesById est passé à React view par mapStateToProps.

Et c'est tout! Nous avons une liste d'articles dans notre navigateur!

Étape 7: Anti-pattern quelque part dans le code?

Pour apprendre le flux de données dans React / Redux, nous avons jusqu’à présent négligé un autre concept Redux. Le composant React doit accéder à l'état Redux via des sélecteurs. Les sélecteurs se trouvent généralement dans les fichiers reducer.js. Ce sont des fonctions pures qui accèdent à l’état Redux et renvoient certaines propriétés d’état. Avec les sélecteurs en place, si vous modifiez l’un de vos états Redux qui affecte plusieurs composants, vous devez uniquement mettre à jour le sélecteur.

Voici notre sélecteur getArticles:

La fonction mapStateToProps dans ArticleIndex.js devient:

Bonus: suivez le même processus de pensée et construisez un filtre

Avec une liste d'articles, nous pouvons ajouter un tas d'opérations différentes. Par exemple, les articles sont tous des nouvelles sur Ethereum. Ils sont classés en deux types: les nouvelles de la communauté des crypto-devises et les nouvelles des grands médias. Après avoir rendu la liste des articles, j'ai ajouté un filtre de type utilisant le même processus de pensée.

Rincer, répéter, refactoriser

Apprendre à réagir / Redux, c’est comme sauter dans un terrier de lapin, mais cela m’a transformé de sceptique en croyant. J'espère que cet article va relancer votre apprentissage.

Dès le début, mon projet d’apprentissage s’est transformé en un agrégateur de nouvelles et une application de suivi des tendances!

Merci pour la lecture!

Si vous êtes sur Steemit, les médias sociaux blockchain (un peu comme l’enfant amoureux de Reddit et Medium), venez ici: