React Class Components 04 - Emitting an API request from componentDidMount

Quête 5 sur 5 · 1 image archivée

FrançaisEnglish (original)

Introduction

Maintenant que tu as appris le lifecycle (cycle de vie du composant) des composants class, tu devrais être capable de déclencher des requêtes API automatiquement, au démarrage de ton application, quand tes composants s'affichent pour la première fois. C'est ce que tu vas pratiquer dans cette quête.

C'est parti ! 🚀

🤓 À la fin de cette quête tu seras capable de :

✅ Envoyer une requête API depuis componentDidMount ✅ Éviter les erreurs dues à un state initial vide

Émettre une requête API depuis componentDidMount

Lis cette ressource jusqu'à "Making a GET Request" et regarde les 4 premières minutes de la vidéo :

▶

Vidéo YouTube

https://www.youtube.com/watch?v=oQnojIyTXb8

Une petite note sur la syntaxe : l'exemple montre une initialisation du state sans utiliser constructor. Cette syntaxe a été introduite en ES7 et revient exactement au même que définir le state dans le constructor. Cependant, dans certains cas, tu auras quand même besoin d'utiliser constructor, car tu pourrais vouloir faire un bind de tes méthodes de class, par exemple les gestionnaires d'événements (event handlers).

Une chose à retenir ici, c'est que componentDidMount est l'endroit le plus approprié pour initier automatiquement une requête API au moment où ton composant est initialisé !

Déclencher la requête API

Amusons-nous avec ce projet : l'application permet de récupérer des employés depuis une API à l'aide d'un bouton. Modifie le composant App en ajoutant la méthode componentDidMount qui va effectuer une requête API dès que l'application est chargée. Cet appel API va récupérer un employé juste après que ton composant a été affiché correctement.

Pour garder les choses simples, appelle ta méthode qui fait un appel API une fois qu'un bouton est cliqué, mais depuis componentDidMount cette fois (pas besoin de te répéter !).

Si tu rencontres un problème avec cette étape, réfère-toi à cette solution sur CodeSandbox :

codesandbox

https://codesandbox.io/s/fetch-employees-componentdidmount-forked-tpe9o0

Après avoir fait ces changements, tu verras l'employé de test pendant un très court instant. Il devrait maintenant être remplacé presque immédiatement par le nouvel employé récupéré depuis la requête à l'API Random User.

Partir d'un état initial vide

Pour l'instant, nous avons initialisé le composant App avec un state pré-rempli : nous avons défini la valeur employee sur un "employé de test".

Cependant la plupart du temps, nous partons en réalité d'un state vide. Regarde ce qui se passe si tu remplaces l'initialisation du state par :

javascript

this.state = {
  employee: null
};

Cela doit provoquer une erreur :

C'est encore une des erreurs les plus courantes que tu rencontreras dans une application React ! Que se passe-t-il ici ?

Le state du composant est initialisé avec une propriété employee définie sur null.
Quand la méthode render est appelée pour la première fois, la requête API n'a même pas encore été initiée (parce que componentDidMount est appelée après le premier render) ! La prop employee utilisée dans DisplayEmployee vaut donc null à ce moment-là.
Dans DisplayEmployee nous essayons d'utiliser employee.picture.medium comme valeur src de l'image. Cela provoque une erreur parce que employee n'est pas un objet mais null.

Pour résoudre ça, nous devons utiliser le rendu conditionnel (conditional rendering). L'idée est d'afficher le composant DisplayEmployee seulement si la valeur de state.employee n'est pas null.

Dans la méthode render de App, on peut le faire de cette façon :

jsx

render() {
  return (
    <div className="App">
      {
        this.state.employee
          ? <DisplayEmployee employee={this.state.employee} />
          : <p>No data yet</p>
      }
      <button type="button" onClick={this.getEmployee}>Get employee</button>
    </div>
  );
}

L'opérateur ternaire est utilisé pour tester la valeur de this.state.employee. Si cette valeur est différente de null (ce qui implique qu'un objet a été récupéré depuis l'API), nous pouvons alors afficher le composant DisplayEmployee. Sinon, un message est affiché indiquant que la donnée n'est pas encore disponible (la valeur null étant équivalente à false dans l'évaluation).

Ce CodeSandbox montre le résultat de ces changements (note que la constante sampleEmployee a maintenant disparu) :

codesandbox

https://codesandbox.io/s/fetch-employees-empty-initial-state-forked-mrtyg0

Le rendu conditionnel évite les crashs de l'application. Le message "no data yet" est affiché tant que la donnée employee du state est vide (null). Seulement ensuite, après avoir reçu une réponse de l'API, nous mettons à jour notre state et donc notre composant est ré-affiché (à cause de la mise à jour du state).

Au lieu d'afficher un paragraphe pendant le chargement ici (ce qui n'est pas très convivial !), nous pourrions plutôt afficher une image de chargement ou même un spinner Bootstrap.

↗

ESSENTIEL - Utiliser Axios avec React

alligator.io

↗

ESSENTIEL - Vidéo associée

Regarde les 4 premières minutes de cette vidéo

youtube.com

Challenge

Charger automatiquement une citation

Tu vas réutiliser l'application du challenge de la quête React Intermediate 02 - Fetching data from an API within React. Pour cela, crée un fork de ton CodeSandbox précédent. CodeSandbox va te demander "Do you want to fork your own sandbox?". Clique sur OK.

Ensuite change ton code pour :

Faire une requête API depuis componentDidMount
Définir la valeur quote du state sur null. Mets à jour ta méthode render pour afficher la donnée de façon conditionnelle : si la donnée n'est pas encore disponible, affiche un message de chargement, par exemple "no data"/"loading", sinon affiche les détails de la citation.

Tu peux garder le bouton qui permet de charger une nouvelle citation.

Critères de validation

[ ] Le code est publié sur CodeSandbox
[ ] Une requête API est faite depuis componentDidMount
[ ] Le rendu conditionnel est utilisé pour afficher la citation seulement quand le state n'est pas vide

Introduction

Now you learned about class components lifecycle, you should be able to trigger API requests automatically, when your application starts up, and your components render for the first time. This is what you're going to practice in this quest.

Let's get this started! 🚀

🤓 By the end of this quest you will be able to:

✅ Send an API request from componentDidMount ✅ Avoid errors due to an empty initial state

Emitting an API request from componentDidMount

Read this resource up to "Making a GET Request" and watch the 4 first minutes of the video:

▶

Vidéo YouTube

https://www.youtube.com/watch?v=oQnojIyTXb8

A quick note about the syntax: the example shows an initialization of state without using constructor. This syntax was introduced in ES7 and is the same as defining the state inside constructor. However, in some cases, you will still need to use constructor, as you might want to bind your class methods e.g. event handlers.

One thing to remember here is that componentDidMount is the most appropriate place to automatically initiate an API request as your component is being initialised!

Triggering the API request

Let's play with this project: the application allows to fetch employees from an API using a button. Tweak the App component by adding the componentDidMount method which will perform an API request as soon as the application is loaded. This API call will fetch an employee right after your component was rendered correctly.

To keep things simple, call your method which makes an API call once a button is clicked, but from componentDidMount this time (no need to repeat yourself!).

If you encounter a problem with this step, please refer to this solution on CodeSandbox:

codesandbox

https://codesandbox.io/s/fetch-employees-componentdidmount-forked-tpe9o0

After making these changes, you will see the test employee for a very brief moment. It should now almost immediately be replaced by the new employee retrieved from the Random User API request.

Starting from an empty initial state

Right now, we initialized the App component with a pre-filled state: we set the value employee to a "test employee".

However most of the time, we actually start from an empty state. See what happens if you replace the state initialization with:

javascript

this.state = {
  employee: null
};

This must cause an error:

This is yet another one of the most common errors you will encounter in a React application! What's going on here?

The component state is initialized with an employee property set to null.
When the render method is called for the first time, the API request has not even been initiated (because componentDidMount is called after the first render)! The employee prop used inside DisplayEmployee is therefore null at this point.
Inside DisplayEmployee we're trying to use employee.picture.medium as the image's src value. This causes an error because employee is not an object but null.

To solve this, we need to use conditional rendering. The idea is to display the component DisplayEmployee only if the value of state.employee is not null.

Inside App's render method, it can be done this way:

jsx

render() {
  return (
    <div className="App">
      {
        this.state.employee
          ? <DisplayEmployee employee={this.state.employee} />
          : <p>No data yet</p>
      }
      <button type="button" onClick={this.getEmployee}>Get employee</button>
    </div>
  );
}

The ternary operator is used to test the value of this.state.employee. If this value is different from null (implying an object was retrieved from the API), we then can display the DisplayEmployee component. Otherwise, a message is displayed indicating that the data is not yet available (the value null being equivalent to false in the evaluation).

This CodeSandbox shows the result of these changes (note that the constant sampleEmployee is now gone):

codesandbox

https://codesandbox.io/s/fetch-employees-empty-initial-state-forked-mrtyg0

Conditional rendering avoids application crashes. The message "no data yet" is displayed as long as the data employee of the state is empty (null). Only then, after we get a response from the API, we update our state and therefore our component is re-rendered (because of the state update).

Instead of showing a paragraph when loading here (which is not so user-friendly!), we could instead show a loading image or even a Bootstrap spinner.

↗

ESSENTIAL - Using Axios with React

alligator.io

↗

ESSENTIAL - Related video

Watch the first 4 minutes of this video

youtube.com

Challenge

Automatically loading a quote

You're going to reuse the application from the React Intermediate 02 - Fetching data from an API within React quest challenge. To do so, create a fork of your previous CodeSandbox. CodeSandbox will ask you "Do you want to fork your own sandbox?". Click OK.

Then change your code to:

Make an API request from componentDidMount
Set the quote state value to be null. Update your render method to display the data conditionally: if the data is not yet available, display a loading message e.g. "no data"/"loading", otherwise show the quote details.

You can keep the button which allows to load a new quote.

Validation criterias

[ ] The code is published on CodeSandbox
[ ] An API request is made from componentDidMount
[ ] Conditional rendering is used to display the quote only when the state isn't empty