Sådan oprettes en React Native App ved hjælp af Firebase. (Del 2)

Opdateret 25. oktober: Skiftet fra at bruge “Tilbagekald” til “Løfter” - (Mappestruktur ændret, api.js-fil slettet, handlinger.js og reducer.js opdateret)

Bemærk, at denne tutorial antager, at du har nogle JavaScript- eller React Native-oplevelser. Denne tutorial forklarer ikke hver linje i koden i stedet for at den giver dig koden og giver dig en oversigt over, hvad koden gør, og påpeger de vigtige dele af koden kode. Jeg har gjort koden så enkel som muligt, hvis du har spørgsmål, så tøv ikke med at give en kommentar.

I del 1 registrerede vi vores app i Firebase og Facebook og oprettede også vores app og installerede de krævede afhængigheder. I denne tutorial vil vi oprette appens bibliotek, redux handlinger, reducere og api.

Nu, hvor vi har fået det ud af vejen, lad koden begynde!

Trin 3: Opret mappestruktur

Opret en appmappe i dit projektrot. Til dette projekt vil jeg organisere kataloget efter funktion / modul i stedet for efter type. Hvis du vil finde ud af mere om organisering efter funktion / modul, skal du læse denne artikel eller denne eller denne eller dette for at få en bedre forståelse og se fordelene ved at organisere dit projekt på denne måde.

Opsæt appmappen med mapper og filer, ligesom billedet herunder.

Inden vi fortsætter, skal vi opdatere indeksfilen i vores autorisations- og hjemmemoduler.

Opdater begge indeksfiler med koden herunder.

Trin 4: Opsætning

I dette trin opretter vi den bagerste knogle af vores app

Konfiguration
Opret filen constants.js i konfigurationsmappen og udfyld den med dine Firebase-appkonfigurationsoplysninger og din Facebook-app-id.

Firebase
Opret en firebase.js-fil i mappen app / config. I denne fil opretter vi en firebase-singleton ved at oprette en forekomst af Firebase SDK og konfigurere den med vores firebase-app-konfigurationsinfo, så vi kan importere den hvor som helst i vores app.

Reducer
Reduktionsreduktionerne er ansvarlige for opdatering af tilstanden for vores app. Opret filen rootReducer.js i redux-mappen. I denne fil importerer vi reduktionsreduktionerne fra vores moduler og bruger redux combineReducers-funktion til at flette dem sammen til et enkelt tilstandsobjekt, som vi senere vil bruge til at oprette vores redux-lager.

butik
Opret filen store.js i redux-mappen. I denne fil opretter vi vores redux-lager ved at importere vores rodreducerende middel og injicere vores butikforstærkere, dvs. Redux Thunk.

Trin 5: Backend (handlinger og reduktion)

Handlinger
Inden vi opretter vores handlinger, vil vi erklære de handlingstyper, der skal bruges, i mappen med autoritetsmodulet, opdatere actionTypes.js-filen.

Opdater filen actions.js i autorisationsmodulmappen. Hver funktion i vores handlingsfil er ansvarlig for at ringe til den passende Firebase API-funktion og udføre den rigtige handling baseret på det returnerede svar.

Registerfunktionen indtager brugerdataene og en tilbagekaldsfunktion som parameter, den udtrækker e-mail-adgangskoden og brugernavnet fra dataobjektet og kalder Firebase createUserWithEmailAndPassword-funktionen for at oprette en ny bruger. Hvis det lykkes, overføres brugernavnet og uid for den nyligt oprettede bruger til createUser-funktionen for at oprette brugerobjektet i Realtime-databasen.

Loginfunktionen ligner registerfunktionen, men den kalder Firebase signInWithEmailAndPassword-funktionen til at logge brugeren ind. Hvis det lykkes, returneres brugerobjektet. Brugerobjektet overføres derefter til getUser-funktionen for at hente brugerobjektet fra Realtime-databasen.

Reducer
Opdater filen reducer.js i autorisationsmodulmappen. Vores reducer vil svare på 2 forskellige handlingstyper, LOGIN_SUCCESS, LOGGED_OUT. Det er op til reduceren at beslutte, om den skal ændre apptilstanden eller ej, baseret på handlingstypen.

LOGGET IND
For denne handlingstype indstiller reduceren isLoggedIn-tilstandsvariablen til true, indstiller brugertilstandsvariablen og gemmer brugerobjektet i AsyncStorage.

LOGGET UD
Reduktionsindstillingen indstiller isLoggedIn-tilstand til falsk, indstiller brugertilstandsvariablen til null og fjerner brugerobjektet fra AsyncStorage.

I del 3 opretter vi vores scener og sprøjter Redux-butikken ind i appen.

Det var alt folkens!

Relaterede tutorials

  1. Tutorial 1: React Native Redux Boilerplate
  2. Tutorial 2: React Native Redux med CRUD-operationer
  3. Sådan oprettes en React Native App ved hjælp af Firebase. (Del 1) (Opsætning)
  4. Sådan oprettes en React Native App ved hjælp af Firebase. (Del 3) (Frontend)
  5. Sådan oprettes en React Native App ved hjælp af Firebase. (Del 4) (Facebook-login)
  6. Sådan oprettes en React Native App ved hjælp af Firebase. (Del 5) (CRUD)

Andre tutorials

  1. Tutorial 4: Sådan oprettes en Laravel 5.4 JWT-drevet API til godkendelse af mobilapp
  2. Tutorial 5: Sådan oprettes en Laravel 5.4 JWT-godkendelses-API med e-mail-verifikation
  3. Tutorial 6 & 7: Sådan oprettes et Laravel 5.4-administrationsmodul med rollebaserede tilladelser ved hjælp af Entrust-pakken

Skift log

  1. 25. oktober: Skiftet fra at bruge “Callbacks” til “Promises” - (Mappestruktur ændret, api.js-fil slettet, actions.js og reducer.js opdateret)
  2. 11. maj: Tilføjet trin 5 (CRUD)
  3. 9. maj: Opdaterede funktioner 'createUserWithEmailAndPassword' og 'login' i api.js-filen. (Dette løser ændring af Firebase 5.0-brud og kalder øjeblikkeligt createUser-funktionen i stedet for at omdirigere til CompleteProfile-visningen)