Wie erstelle ich eine React Native App mit Firebase? (Teil 2)

25. Oktober aktualisiert: Umstellung von "Rückruf" auf "Versprechen" - (Ordnerstruktur geändert, api.js-Datei gelöscht, actions.js und reducer.js aktualisiert)

Beachten Sie, dass in diesem Lernprogramm davon ausgegangen wird, dass Sie über JavaScript oder React Native verfügen. In diesem Lernprogramm werden nicht alle Codezeilen erläutert. Stattdessen wird der Code angezeigt, und Sie erhalten einen Überblick über die Funktionsweise des Codes Code. Ich habe den Code so einfach wie möglich gemacht. Wenn Sie Fragen haben, zögern Sie bitte nicht, einen Kommentar zu hinterlassen.

In Teil 1 haben wir unsere App bei Firebase und Facebook registriert, unsere App erstellt und die erforderlichen Abhängigkeiten installiert. In diesem Tutorial erstellen wir das App-Verzeichnis, Redux-Aktionen, Reduzierungen und APIs.

Nun, da wir das aus dem Weg geräumt haben, LASS DIE CODIERUNG BEGINNEN!

Schritt 3: Ordnerstruktur erstellen

Erstellen Sie in Ihrem Projektstamm einen App-Ordner. Für dieses Projekt organisiere ich das Verzeichnis nach Merkmalen / Modulen anstatt nach Typ. Um mehr über das Organisieren nach Merkmalen / Modulen zu erfahren, lesen Sie diesen Artikel oder diesen oder diesen, um ein besseres Verständnis zu erhalten und die Vorteile des Organisierens Ihres Projekts auf diese Weise zu erfahren.

Richten Sie den App-Ordner mit Ordnern und Dateien wie im folgenden Bild ein.

Bevor wir fortfahren, müssen wir die Indexdatei in unseren auth- und home-Modulen aktualisieren.

Aktualisieren Sie beide Indexdateien mit dem folgenden Code.

Schritt 4: Setup

In diesem Schritt richten wir das Rückgrat unserer App ein

Aufbau
Erstellen Sie im Konfigurationsordner die Datei constants.js und füllen Sie sie mit Ihren Konfigurationsinformationen für die Firebase-App und Ihrer Facebook-App-ID.

Feuerbasis
Erstellen Sie im Ordner "app / config" eine Datei "firebase.js". In dieser Datei erstellen wir einen Firebase-Singleton, indem wir eine Instanz des Firebase-SDK erstellen und diese mit unseren Konfigurationsinformationen für die Firebase-App konfigurieren, damit wir sie von überall in unserer App importieren können.

Reduzierstück
Die Reduzierungen sind dafür verantwortlich, den Status unserer App zu aktualisieren. Erstellen Sie im Redux-Ordner die Datei rootReducer.js. In dieser Datei importieren wir die Reduzierungen aus unseren Modulen und führen sie mit der Funktion "Redux CombineReducers" zu einem einzigen Statusobjekt zusammen, das wir später zum Erstellen unseres Redux-Speichers verwenden werden.

Geschäft
Erstellen Sie im Redux-Ordner die Datei store.js. In dieser Datei erstellen wir unseren Redux-Speicher, indem wir unseren Root-Reduzierer importieren und unsere Speichererweiterungen, d. H. Redux Thunk, einschleusen.

Schritt 5: Backend (Aktionen und Reduzierer)

Aktionen
Bevor wir unsere Aktionen erstellen, deklarieren wir die zu verwendenden Aktionstypen. Aktualisieren Sie die Datei actionTypes.js im Ordner auth module.

Aktualisieren Sie im Ordner auth module die Datei actions.js. Jede Funktion in unserer Aktionsdatei ist dafür verantwortlich, die entsprechende Firebase-API-Funktion aufzurufen und die richtige Aktion basierend auf der zurückgegebenen Antwort auszuführen.

Die Registerfunktion nimmt die Benutzerdaten und eine Rückruffunktion als Parameter auf, extrahiert das E-Mail-Kennwort und den Benutzernamen aus dem Datenobjekt und ruft die Firebase-Funktion createUserWithEmailAndPassword auf, um einen neuen Benutzer zu erstellen. Bei Erfolg werden der Benutzername und die UID für den neu erstellten Benutzer an die Funktion createUser übergeben, um das Benutzerobjekt in der Echtzeitdatenbank zu erstellen.

Die Anmeldefunktion ähnelt der Registerfunktion, ruft jedoch die Firebase-Funktion signInWithEmailAndPassword auf, um den Benutzer anzumelden. Bei Erfolg wird das Benutzerobjekt zurückgegeben. Das Benutzerobjekt wird dann an die Funktion getUser übergeben, um das Benutzerobjekt aus der Echtzeitdatenbank abzurufen.

Reduzierstück
Aktualisieren Sie im Ordner auth module die Datei reducer.js. Unser Reduzierer reagiert auf 2 verschiedene Aktionstypen, LOGIN_SUCCESS, LOGGED_OUT. Es liegt am Reduzierer zu entscheiden, ob der App-Status geändert werden muss oder nicht, basierend auf dem Aktionstyp.

EINGELOGGT
Für diesen Aktionstyp setzt der Reduzierer die Statusvariable isLoggedIn auf true, setzt die Benutzerstatusvariable und speichert das Benutzerobjekt im AsyncStorage.

ABGEMELDET
Der Reduzierer setzt den isLoggedIn-Status auf false, setzt die Benutzerstatusvariable auf null und entfernt das Benutzerobjekt aus dem AsyncStorage.

In Teil 3 erstellen wir unsere Szenen und fügen den Redux-Store in die App ein.

Das war's Leute!

Verwandte Tutorials

  1. Tutorial 1: Reagieren Sie mit Native Redux Boilerplate
  2. Tutorial 2: Reagieren Sie mit CRUD-Operationen auf Native Redux
  3. Wie erstelle ich eine React Native App mit Firebase? (Teil 1) (Setup)
  4. Wie erstelle ich eine React Native App mit Firebase? (Teil 3) (Frontend)
  5. Wie erstelle ich eine React Native App mit Firebase? (Teil 4) (Facebook Login)
  6. Wie erstelle ich eine React Native App mit Firebase? (Teil 5) (CRUD)

Andere Tutorials

  1. Lernprogramm 4: Erstellen einer Laravel 5.4-Authentifizierungs-API für mobile Anwendungen mit JWT
  2. Lernprogramm 5: Erstellen einer Laravel 5.4-JWT-Authentifizierungs-API mit E-Mail-Überprüfung
  3. Lernprogramm 6 und 7: Erstellen eines Laravel 5.4-Verwaltungsmoduls mit rollenbasierten Berechtigungen mithilfe des Entrust-Pakets

Änderungsprotokoll

  1. 25. Oktober: Umstellung von Callbacks auf Promises (Ordnerstruktur geändert, api.js-Datei gelöscht, actions.js und reducer.js aktualisiert)
  2. 11. Mai: Schritt 5 hinzugefügt (CRUD)
  3. 9. Mai: Die Funktionen "createUserWithEmailAndPassword" und "login" in der Datei "api.js" wurden aktualisiert. (Dies behebt die Änderung in Firebase 5.0 und ruft sofort die Funktion createUser auf, anstatt zur CompleteProfile-Ansicht umzuleiten.)