Construisons: Application mobile native Crypto-monnaie avec React Native + Redux - Chapitre III

Bienvenue dans le développement d'applications natives avec React Native et Redux comme un patron! Heureux de vous avoir ici! ❤

Ceci est une pré-suite du chapitre II.

Où nous nous sommes arrêtés

Récupérer les données avec Redux et Redux Thunk

Nous sommes enfin prêts à récupérer nos données. Nous allons utiliser l’API publique Coinmarketcap. Si vous trouvez une meilleure API de chiffrement, faites-le-moi savoir!

Créez un fichier src / Utils / Constants.js et ajoutez-y l'URL de base de votre API.

Pourquoi? Si l'URL de l'API change - nous n'avons besoin de le changer qu'à un seul endroit, neato!

Ensuite, allez dans src / Actions et créez un fichier appelé FetchCoinData.js. Ici, nous allons récupérer nos données de pièces crypto-cryptées. Nous allons utiliser axios (oui, je connais l’API native fetch) - je préfère toujours beaucoup axios.

Une recherche rapide sur Google montre pourquoi (plus d'options, meilleure API, meilleure gestion des erreurs).

npm i --save axios

Importez axios et apiBaseURL à partir de Constants.js. Ajoutez également le passe-partout pour l’action. Essayez de mettre cela en œuvre vous-même. Rappelez-vous qu'une action est simplement une fonction qui est exportée.

Prêt?

Création d'actions

action passe-partout

Ensuite, nous retournons une action thunk. Les actions de thunk sont des fonctions. Pourquoi Thunk? Plus de contrôle. Je vais vous montrer exactement ce que je veux dire.

Cela peut sembler un peu déroutant. Nous avons une fonction, qui retourne une fonction? Oui. C'est Thunk qui fait sa magie.

Pensez-y une seconde. Lors de la demande de données, il existe 3 états.

  1. Demander les données.
  2. Data Requesting Successful (200 - obtenu les données!)
  3. Échec de demande de données

Cela est parfaitement logique. Pensez-y comme à une promesse, il y a appel de la promesse, résolution de la promesse et expulsion de la promesse.

Finissons de mettre en œuvre le reste de l’action thunk. Essayez d'implémenter la récupération des données.

Cool! C'est une façon de récupérer des données avec Redux et Redux Thunk. J'aime la gestion des erreurs. En outre, il est possible d’utiliser async et d’attendre ici aussi.

Remarquez la belle gestion des erreurs - c'est la principale raison pour laquelle nous utilisons une action Thunk ici.

Prochaine étape - créer nos types d'action. Commencez par créer un fichier dans src / Utils appelé ActionTypes.js

Importez les types d'action dans notre action.

Bien joué! Notre action pour récupérer les données est terminée! Nous devons transmettre notre charge utile au réducteur et également mapper l'action à notre composant.

Mise en oeuvre des réducteurs

Imaginez notre charge utile de quelque chose comme ceci:

Ce ne sont que des données brutes. Nous devons transmettre ces données à notre réducteur.

Ouvrez notre CryptoReducer.js et définissez notre état initial

Nous avons besoin:

  • Etat pour que les données soient récupérées afin que nous puissions montrer un compteur.
  • L'état qui contient les données réelles de la demande.
  • Traitement des erreurs - avons-nous une erreur et si oui que dit-elle?

Prochaine étape: implémentation de la condition switch () et importation des types d'action.

J'utilise la méthode Object.assign () pour créer de nouveaux objets. Vous êtes également libre d'utiliser l'objet étendu.

Quel est l’intérêt d’écrire un code comme celui-ci? Facile - maintenabilité! Oui, c’est beaucoup de code de chaudière pour récupérer des données - mais c’est la bonne façon!

case FETCHING_COIN_DATA - est utilisé lorsque nous récupérons les données et affichons le compteur. React gère toutes les mises à jour de vDOM, il ne reste plus qu'à passer notre état.

Essayez d'implémenter les cas pour FETCHING_COIN_DATA_SUCCESS et FETCHING_COIN_DATA_FAILURE

Solution ci-dessous:

Maintenant, la seule chose qui nous reste à faire est d'appeler l'action FetchCoinData!

Appel de l'action FetchCoinData!

Essayez de le mettre en œuvre. Voici les étapes.

  • Importer l'action dans CryptoContainer.js
  • Mappez l'argument FetchCoinData à l'intérieur de la connexion.
  • appelez this.props.FetchCoinData () à l'intérieur de composantDidMount ()

Et c'est tout!

Actualisez le simulateur (mac: cmd + R, Windows: Ctrl + R), ouvrez Redux Devtools et vous devriez voir les données en état de cryptage.

Remarque: s’il n’affiche pas, essayez de redémarrer le simulateur.

Nos données sont mappées sous this.props.crypto - parfait! Implémentons les vues dans le chapitre suivant!

Merci d’avoir été aussi loin, vous êtes vraiment un guerrier et vous avez ce qu’il faut pour devenir un pro React + Redux. La cohérence, apprendre chaque jour, ne jamais abandonner sont les traits que vous possédez! Bien joué!

Seeya dans le prochain et dernier chapitre!

Oh et - voici le code source!