Sådan integreres React Redux og Firebase i 3 enkle trin

I denne artikel lærer du, hvordan du:

  • Opret enkel brugergrænseflade til applikationen ved hjælp af React
  • Sæt Redux-butikken til React-applikationen
  • Forbind Firebase realtime-database med Redux-butik
  • Kombiner disse 3 ting for at skabe fuldt funktionel To-Do-applikation

Før vi dykker ned i disse 3 søjler. Sådan ser applikationsstrømmen ud. Vores komponent vil udløse en handling. Denne handling foretager en vis anmodning i Firebase-databasen i realtid. Derefter går data fra Firebase til vores reducer. Fra reducer til opbevaring. Og fra butikskomponent kan få adgang til dataene. Intet fan, men det får jobbet gjort.

Applikationsflow, der integrerer Firebase

Oprettelse af enkel brugergrænseflade

Vi bruger create-react-app-pakken til at generere vores kedelplade. Hvis du endnu ikke har det, skal du bare køre npm-installation -g create-react-app. Gå derefter til det bibliotek, hvor du ønsker, at dit projekt skal være placeret, og kør create-react-app react-redux-firebase eller ethvert navn, som du finder passende. Inden i src-biblioteket fjerner de unødvendige filer. Lad kun index.js App.js og registerServiceWorker.js være der. Rør ikke ved registerServiceWorker.js. Andre filer ser ud som følger.

Okay. Vi er i et godt udgangspunkt. Nu er det det ideelle tidspunkt at oprette Redux-butik til vores applikation og tilslutte den.

Tilslutning af Redux-butik til React-applikationen

Butik er hvor alle data til vores applikation vil være. Når en komponent har brug for nogle data. Vi forbinder det bare til butikken, og så kan vi få adgang til dataene i selve komponenten. For at gøre det skal vi først installere et par pakker. Inde i projektets direkotoriske kørsel

npm installation - gem redux reaktion-redux redux-thunk

Okay ... Vi har alle afhængigheder for at skabe butik klar. Lad os nu oprette reduceringsmodul. Inde i src-bibliotek oprette en ny mappe kaldet reducere. Indenfor reduktionsbibliotek oprette fildataReducer.js. Nu reducer er bare en simpel funktion med 2 argumenter. Starttilstand og handling. Alle handlinger, der udløses fra komponenten, går gennem alle reduktionsredskaber. Nu kontrollerer hver reducer handlingstypen, og hvis det er typen reducering ved, opdaterer de dataene i butikken.

Sådan ser vores reducer ud. Den kontrollerer, om handlingstypen er FETCH_TODOS, og om den er, opdaterer listen over vores Opgaver. Opret nu indholdet i reduceringsbiblioteket fil index.js. Dette vil være indgangspunkt for vores reduktionsmaskiner. Vi kan kombinere her flere reduktionsredskaber. I vores tilfælde har vi kun en, men hvis applikationen bliver stor i fremtiden, har vi brug for flere reduktionsmaskiner for sikker.

Hvis vi tilføjer en ny reducer, opretter vi bare en ny fil i kataloget med reduceringsredskaber. Importér det derefter. Og tilføj det til sidst til combineReducers-funktion. Denne funktion tager alle reduceringer og kombinerer dem til en. Og fortæller også, hvilken reducer der er ansvarlig for hvilke data i butikken.

Når vi nu har reduceringsmodul klar, kan vi oprette en butik og vedhæfte den til vores applikation. Inde i projektrotmappen åbner index.js. I denne fil siger vi, at vi vil gengive App-komponenten. For at vedhæfte app til lagring er vi nødt til at pakke den ind i leverandørkomponenten. Udbyder tager butiksprop, der repræsenterer applikationsbutikken. For at oprette butik bruger vi hjælpemetode fra redux-pakke. Denne metode tager vores reduktionsdele, mellemværker, hvis vi vil bruge nogle og skaber en butik. Index.js vil se nøjagtigt sådan ud. Og det er det. Nu har vi butik forbundet til vores applikation.

Tilslutning af Firebase realtidsdatabase med Redux-butik

Dette trin kan se ud som den hårde del, men det er faktisk meget let. Lad os først installere afhængigheder, og vi fordeler, hvordan Firebase-databasen fungerer.

npm installation - gemme ildbase

Nu skal vi initialisere Firebase i vores applikation. Opret ny mappekonfiguration og inde i oprette ny fil firebase.js. Her importerer vi firebase SDK initialiserer appen, opret databasereference og eksporterer den. Vi bruger databasereferencen til todos til at oprette nye taks eller udfylde dem senere i handlingsmodulet. Du kan spørge, hvad der er FirebaseConfig-objekt. Vi opretter det senere, når jeg viser dig, hvordan du opretter din egen Firebase-applikation.

Før vi går over til handlingsmodul, lad os få et ord om, hvordan Firebase-databasen i realtid fungerer. I vores tilfælde lagrer vi en liste over opgaver i databasen. Vi kalder dem "todos". Vi vil vedhæfte lytter på denne liste over opgaver, og hver gang listen ændres, ved vores applikation, at der var en ændring i dataene. Det henter de nye data fra Firebase-databasen og viser dem derefter. Det betyder, at vi ikke behøver at bede vores applikation om at hente data igen, når vi opretter en ny opgave eller afslutter en. Vores ansøgning ved det.

Lad os nu oprette handlingsmodul. Inde i src-bibliotek oprette nye mappeaktioner. Og her oprette filer index.js og types.js. Typefilen gemmer bare strengkonstanter til handlingstyper. Indeks er indgangspunkt for vores handlingsmodul og vil indeholde nøjagtigt 3 handlinger. addToDo vil tilføje en ny opgave til listen over taks, completeToDo vil fjerne den. Og fetchToDos vil lytte til ændringer, og hvis der er nogle, henter de dataene. Derefter kaldes den afsendelsesmetode. Denne metode tager et argument, som er objekt med type og nyttelast. Type repræsenterer handlingstype, så reduceren ved, om den skal håndtere handlingen. Og nyttelast repræsenterer faktiske data.

Nu er det på tide at lime alle disse ting sammen ved hjælp af React-komponenten. Men lad os først oprette din egen Firebase-applikation først

Oprettelse af Firebase-applikation

  1. Gå til https://console.firebase.google.com/u/0/
  2. Log ind med din Google-konto, og klik derefter på Tilføj projekt
  3. Indstil dit projektnavn og region, og klik på Opret projekt
  4. Du skal se Firebase-betjeningspanel
Firebase-betjeningspanel

Lad os nu oprette Firebase-konfigurationsfil, som faktisk fortæller Firebase SDK, hvilket program vi bruger. Inde i konfigurationsbiblioteket oprettes nøgler.js. Dette vil kontrollere, om vi er i produktionstilstand eller ej. Det, du ikke ønsker at dele dine nøgler. Vi opretter dev.js og prod.js. Dev-fil vil indeholde faktiske strenge, men du vil aldrig offentliggøre denne fil. Prod-fil refererer kun til miljøvariabler.

Nu skal du bare udfylde dev.js med dine faktiske værdier. API-nøgle og projekt-id kan findes i projektindstillinger i Firebase-dashboard. Følg disse trin for at oprette database

Derefter kan du se din database-URL. Det skal være

.firebaseio.com”

Skriv alle disse værdier til dev.js, og din Firebase-applikation er forbundet med firebase SDK. Nu er det tid til at lime alle disse dele sammen, og resultatet bliver funktionel anvendelse

Kombinerer alle sammen

Vi har forberedt alle de ting, vi skal bare oprette 2 komponenter og ledde dem op til opbevaring. Vi vil have ToDoListItem og ToDoList.

Inde i src-bibliotek oprette nye bibliotekskomponenter. Opret her ToDoListItem.js. Denne komponent gengiver bare den aktuelle opgave. Det viser, hvad der er den faktiske opgave, og den indeholder en knap. Når der klikkes på knappen. Opgaven er afsluttet og fjernet. Vi bruger completeToDo-handling i denne komponent. For at knytte handlinger til denne komponent bruger vi forbindelsesmetoden. Det kræver 2 argumenter. Den første er funktion, der tager data fra butikken, og den anden er et objekt, der indeholder handlinger.

Nu til ToDoList-komponenten. Det vil indeholde enkel form til oprettelse af en ny opgave. Denne formular vises, når vi klikker på Tilføj-knappen. Og det forsvinder, når vi klikker på det igen. Denne komponent udløser addToDo-handling, når du indsender formular. Og det vil lytte til ændringer i databasen ved hjælp af fetchToDos-handling. Vi vil igen gøre brug af forbindelsesmetoden. Denne gang tager det også mapStateToProps-funktion. Derinde fortæller vi, at vi ønsker at få adgang til data fra butikken. Hvis dataene i butikken opdateres, bliver vores komponent også opdateret. Endelig lad os også oprette CSS-fil til denne komponent og importere den.

Vi har alt oprettet. Nu er det sidste tynd at skifte app-komponent til at bruge ToDoList. Og vores ansøgning er færdig.

Og det var det. Vi oprettede en butik med reduktionsredskaber og knyttet den til vores applikation. Vi oprettede handlingsmodul og udløser derefter disse handlinger i vores komponenter. Vi skabte 2 komponenter. Komponenten er forbundet til butikken, og den kan også udløse handlinger. Og dette resulterede i funktionel ToDo-applikation. Applikationens kildekode er tilgængelig på Github.

Den dårlige ting ved det er, at det kan bruges sammen med flere brugere. For nu holder vi ikke øje med, hvem opgaven tilhører. Det vil vi gøre i næste indlæg. Vi viser, hvordan man gør autorisation med ildbase, og vi distribuerer applikationen til den virkelige verden.

Tak for din opmærksomhed. Hvis du kunne lide historien, og du lærte noget nyt, så lad verden vide det ved at klappe. Hvis du vil se mere, skal du trykke på knappen "Følg". Jeg opretter selvstudier som denne hver uge. Hvis du ikke er bekendt med at reagere, har jeg en række tutorials til at komme i gang. Du kan tjekke dem her https://medium.com/@bernardbad. Tak for din opmærksomhed igen og se dig næste gang.