Comment intégrer React Redux et Firebase en 3 étapes simples

Dans cet article, vous apprendrez comment:

  • Créer une interface utilisateur simple pour l'application à l'aide de React
  • Joindre le magasin Redux à l'application React
  • Connectez la base de données en temps réel Firebase avec Redux Store
  • Combinez ces 3 éléments pour créer une application entièrement fonctionnelle

Avant de plonger dans ces 3 piliers. Voici à quoi ressemblera le flux de l'application. Notre composant va déclencher une action. Cette action fera une requête sur la base de données en temps réel Firebase. Ensuite, les données de Firebase iront à notre réducteur. De réducteur à stocker. Et à partir du composant magasin peut accéder aux données. Rien d'extraordinaire, mais le travail est fait.

Flux applicatif intégrant Firebase

Créer une interface utilisateur simple

Nous allons utiliser le paquetage create-react-app pour générer notre standard. Si vous ne l’avez pas encore, lancez npm install -g create-react-app. Après cela, allez dans le répertoire où vous voulez que votre projet soit situé et lancez create-react-app react-redux-firebase ou tout nom que vous jugez approprié. Dans le répertoire src, supprimez les fichiers inutiles. Laissez uniquement les fichiers index.js App.js et registerServiceWorker.js. Ne touchez pas registerServiceWorker.js. Les autres fichiers ressembleront à ce qui suit.

D'accord. Nous sommes dans un bon point de départ. Il est maintenant temps de créer le magasin Redux pour notre application et de le connecter.

Joindre le magasin Redux à l'application React

Le magasin est l'endroit où toutes les données pour notre application seront. Lorsqu'un composant a besoin de données. Il suffit simplement de le connecter au magasin pour pouvoir ensuite accéder aux données du composant lui-même. Pour ce faire, nous devons d’abord installer quelques paquets. Exécution du répertoire intérieur du projet

npm installer --save redux réagir-redux redux-thunk

Okay… Nous avons toutes les dépendances pour créer un magasin prêt. Créons maintenant le module réducteurs. Dans le répertoire src, créez un nouveau dossier appelé réducteurs. Dans le répertoire réducteurs, créez le fichier dataReducer.js. Maintenant, réducteur est juste une fonction simple avec 2 arguments. Etat initial et action. Toutes les actions déclenchées par le composant passent par tous les réducteurs. Maintenant, chaque réducteur vérifie le type d’action et, s’il le sait, il met à jour les données stockées.

Voici à quoi ressemblera notre réducteur. Il vérifie si le type d'action est FETCH_TODOS et, le cas échéant, met à jour la liste de nos tâches. Maintenant, dans le répertoire réducteurs, créez le fichier index.js. Ce sera le point d’entrée pour nos réducteurs. Nous pouvons combiner ici plusieurs réducteurs. Dans notre cas, nous n’en avons qu’un, mais si l’application grandit à l’avenir, nous aurons certainement besoin de plusieurs réducteurs.

Si nous ajoutons un nouveau réducteur, nous créons simplement un nouveau fichier dans le répertoire réducteurs. Puis importez-le. Et enfin, ajoutez-le à la fonction combineReducers. Cette fonction prend tous les réducteurs et les combine en un seul. Et indique également quel réducteur est responsable de quelles données dans le magasin.

Maintenant que le module de réduction est prêt, nous pouvons créer un magasin et l’attacher à notre application. Dans le répertoire racine du projet, ouvrez index.js. Dans ce fichier, nous disons que nous voulons rendre le composant App. Pour attacher App à stocker, nous devons l'envelopper dans le composant Fournisseur. Le fournisseur prend le prop qui représente le magasin d'applications. Pour créer un magasin, nous utilisons la méthode d'assistance du paquetage redux. Cette méthode prend nos réducteurs, middlewares si on veut en utiliser et crée un magasin. Le fichier index.js ressemblera exactement à ceci. Et c'est tout. Nous avons maintenant un magasin connecté à notre application.

Connexion de la base de données temps réel Firebase avec Redux Store

Cette étape peut ressembler à la partie la plus difficile, mais elle est en réalité très facile Commençons par installer les dépendances et nous expliquons le fonctionnement de la base de données Firebase.

npm install --save firebase

Nous devons maintenant initialiser Firebase dans notre application. Créez un nouveau répertoire de configuration et à l'intérieur créez un nouveau fichier firebase.js. Ici, nous importons firebase SDK, initialisons la référence de la base de données de création d’application et exportons-la. Nous utiliserons la référence de base de données pour les tâches à créer pour créer de nouvelles tâches ou pour les compléter ultérieurement dans le module Actions. Vous pourriez vous demander quel est l'objet FirebaseConfig. Nous le créerons plus tard lorsque je vous montrerai comment créer votre propre application Firebase.

Avant de passer au module actions, expliquons comment fonctionne la base de données en temps réel Firebase. Dans notre cas, nous allons stocker la liste des tâches dans la base de données. Nous les appelons "todos". Nous allons attacher un auditeur à cette liste de tâches et chaque fois que la liste sera modifiée, notre application saura que les données ont changé. Il va récupérer les nouvelles données de la base de données Firebase puis les affiche. Cela signifie que nous n'avons pas à demander à notre application de récupérer les données lorsque nous créons une nouvelle tâche ou en effectuons une. Notre application le saura.

Créons maintenant le module d’actions. Dans le répertoire src, créez de nouvelles actions sur les dossiers. Et ici, créez les fichiers index.js et types.js. Le fichier Types stocke simplement les constantes de chaîne pour les types d'action. L'index est le point d'entrée de notre module d'actions et contiendra exactement 3 actions. addToDo va ajouter une nouvelle tâche à la liste des tâches, completeToDo va la supprimer. Et fetchToDos écoutera les modifications et, s’il y en a, il récupérera les données. Ensuite, il appellera la méthode d'envoi. Cette méthode prend un argument qui est object avec type et payload. Type représente le type d'action pour que le réducteur sache s'il doit gérer l'action. Et la charge représente les données réelles.

Il est maintenant temps de coller toutes ces choses ensemble en utilisant le composant React. Mais commençons par créer votre propre application Firebase

Création d'une application Firebase

  1. Accédez à la page https://console.firebase.google.com/u/0/.
  2. Connectez-vous avec votre compte Google, puis cliquez sur Ajouter un projet.
  3. Définissez le nom et la région de votre projet, puis cliquez sur Créer un projet.
  4. Vous devriez voir le tableau de bord Firebase
Tableau de bord Firebase

Créons maintenant un fichier de configuration Firebase qui indique au SDK de Firebase quelle application nous utilisons. Dans le répertoire de configuration, créez keys.js. Cela vérifiera si nous sommes en mode production ou non. La chose que vous ne voulez pas partager vos clés. Nous créons dev.js et prod.js. Le fichier de développement contiendra des chaînes réelles, mais vous ne publierez jamais ce fichier. Le fichier Prod ne fera référence qu'à des variables d'environnement.

Maintenant, il vous suffit de renseigner dev.js avec vos valeurs réelles. La clé API et l'ID de projet se trouvent dans les paramètres de projet du tableau de bord Firebase. Pour configurer la base de données, suivez ces étapes

Après cela, vous pouvez voir l'URL de votre base de données. Sa devrait être

.firebaseio.com”

Tapez toutes ces valeurs sur dev.js et votre application Firebase est connectée à Firebase SDK. Il est maintenant temps de coller toutes ces pièces ensemble et le résultat sera une application fonctionnelle

Combinant tous ensemble

Nous avons tout préparé, il ne nous reste plus qu'à créer 2 composants et les relier au magasin. Nous aurons ToDoListItem et ToDoList.

Dans le répertoire src, créez de nouveaux composants de répertoire. Ici, créez ToDoListItem.js. Ce composant ne fait que rendre la tâche réelle. Il montre quelle est la tâche réelle et contient le bouton. Lorsque le bouton est cliqué. La tâche est terminée et supprimée. Nous utilisons l'action completeToDo dans ce composant. Pour attacher des actions à ce composant, nous utilisons la méthode connect. Il faut 2 arguments. La première est la fonction qui prend des données du magasin et la seconde est un objet contenant des actions.

Passons maintenant au composant ToDoList. Il contiendra un formulaire simple pour créer une nouvelle tâche. Ce formulaire apparaîtra lorsque nous cliquons sur le bouton Ajouter. Et il disparaîtra lorsque nous cliquons à nouveau dessus. Ce composant déclenchera une action addToDo lors de la soumission du formulaire. Et il écoutera les changements dans la base de données en utilisant l'action fetchToDos. Nous allons à nouveau utiliser la méthode connect. Cette fois, il faut aussi la fonction mapStateToProps. Ici, nous disons que nous voulons accéder aux données du magasin. Si les données stockées sont mises à jour, notre composant le sera également. Enfin, créons également un fichier CSS pour ce composant et importons-le.

Nous avons tout mis en place. Maintenant, la dernière chose à faire est de changer le composant App pour qu'il utilise ToDoList. Et notre application est terminée.

Et c'était ça. Nous avons créé un magasin avec des réducteurs et l'avons annexé à notre application. Nous avons créé le module actions puis déclenché ces actions dans nos composants. Nous avons créé 2 composants. Le composant est connecté au magasin et peut également déclencher des actions. Et cela a abouti à l'application ToDo fonctionnelle. Le code source de l'application est disponible sur Github.

Le problème, c’est qu’il peut être utilisé avec plusieurs utilisateurs. Parce que maintenant nous ne gardons pas trace de la tâche à laquelle appartient. Nous ferons cela dans le prochain post. Nous montrerons comment faire des autorisations avec firebase et déploierons l’application dans le monde réel.

Merci de votre attention. Si vous avez aimé l'histoire et que vous avez appris quelque chose de nouveau, faites-le savoir en applaudissant. Si vous voulez en voir plus, cliquez sur le bouton «Suivre». Je crée des tutoriels comme celui-ci chaque semaine. Si vous n’êtes pas familier avec Reactor, j’ai une série de tutoriels pour vous aider à démarrer. Vous pouvez les consulter ici https://medium.com/@bernardbad. Merci de votre attention et à la prochaine fois.