Kuidas integreerida React Redux ja Firebase 3 lihtsas etapis

Selles artiklis saate teada, kuidas:

  • Looge rakenduse React abil lihtne kasutajaliides
  • Ühendage Reduxi pood rakendusega React
  • Ühendage Firebase reaalajas andmebaas Reduxi kauplusega
  • Kombineerige need 3 asja, et luua täielikult funktsionaalne ülesandepõhine rakendus

Enne kui me sukeldume nendesse 3 sambasse. Nii näeb välja rakenduse voog. Meie komponent käivitab toimingu. See toiming teeb Firebase reaalajas andmebaasis mõne päringu. Siis lähevad Firebase'i andmed meie reduktorisse. Reduktorist laosse. Ja poest komponent pääseb andmetele juurde. Pole midagi väljamõeldud, kuid sellega saab töö tehtud.

Rakendusvoog integreerib Firebase'i

Lihtsa kasutajaliidese loomine

Kasutame boileri genereerimiseks paketti loo-reageeri-rakendus. Kui teil seda veel pole, käivitage lihtsalt rakendus npm install -g create-react-app. Pärast seda minge kataloogi, kus soovite oma projekti asuda, ja käivitage loo-reageeri-rakendus reageeri-redux-firebase või mõni muu sobiv nimi. Src-kataloogist eemaldage mittevajalikud failid. Jätke sinna ainult index.js App.js ja registerServiceWorker.js. Ärge puudutage registerServiceWorker.js. Muud failid näevad välja järgmised.

Okei. Oleme heas lähtepunktis. Nüüd on ideaalne aeg meie rakenduse jaoks Reduxi poe loomiseks ja ühendamiseks.

Reduxi poe kinnitamine rakendusele React

Poes on kõik meie rakenduse andmed. Kui komponent vajab andmeid. Ühendame selle lihtsalt poodiga ja siis pääsete juurde komponendi enda andmetele. Selleks peame esmalt installima paar paketti. Projekti sisemine juhtimine

npm install - salvestage redux reagect-redux redux-thunk

Olgu ... Meil ​​on kaupluste loomiseks kõik sõltuvused. Loogem nüüd reduktorite moodul. Src-kataloogis looge uus kaust nimega reduktorid. Vähendajate kataloogis looge fail dataReducer.js. Nüüd on reduktor vaid 2 argumendiga lihtne funktsioon. Algseis ja tegevus. Kõik komponendist käivitatavad toimingud läbivad kõik reduktorid. Nüüd kontrollib iga reduktor toimingu tüüpi ja kui see on reduktorist teada, värskendab see talletatud andmeid.

Nii näeb välja meie reduktor. See kontrollib, kas toimingu tüüp on FETCH_TODOS ja kas see on see, värskendab see meie ülesannete loendit. Nüüd looge reduktorite kataloogis fail index.js. See on sisenemispunkt meie reduktoritele. Saame siin kombineerida mitut reduktorit. Meie puhul on meil ainult üks, kuid kui rakendus kasvab tulevikus suureks, vajame kindlasti mitut reduktorit.

Uue reduktori lisamisel loome lihtsalt reduktorite kataloogi uue faili. Seejärel importige see. Ja lõpuks lisage see funktsioonile ühendada reduktorid. See funktsioon võtab kõik reduktorid kokku ja ühendab need üheks. Ja ütleb ka, milline reduktor vastutab selle eest, millised andmed laos asuvad.

Kui reduktorite moodul valmis sai, saame poe luua ja oma rakendusele kinnitada. Projekti juurkataloogi sees avage register.js. Selles failis öeldakse, et tahame renderdada rakenduse komponendi. Rakenduse salvestamiseks kinnitamiseks peame selle pakkijakomponenti pakkima. Pakkuja võtab kaupluse rekvisiidi, mis tähistab rakenduste poodi. Kaupluse loomiseks kasutame redigeerimispaketi abilise meetodit. See meetod võtab kasutusele meie reduktorid, kui soovite mõnda kasutada, ja luuakse kauplus. Indeks.js näeb välja täpselt selline. Ja see ongi kõik. Nüüd on meie rakendusega ühendatud kauplus.

Firebase reaalajas andmebaasi ühendamine Reduxi kauplusega

See samm võib tunduda raske osa, kuid tegelikult on see väga lihtne. Esmalt installime sõltuvused ja jagame lahti, kuidas töötab Firebase'i andmebaas.

npm install - salvestage tulemüür

Nüüd peame Firebase'i meie rakenduses lähtestama. Looge uus kataloogikonfiguratsioon ja looge sees uus fail firebase.js. Siin impordime Firebase SDK-d ja lähtestame rakenduse andmebaasi viite loomise ning eksportime selle. Kasutame andmebaaside viiteid ülesannete jaoks, et luua uusi sakke või neid hiljem toimingumoodulis täiendada. Võite küsida, mis on objekt FirebaseConfig. Loome selle hiljem, kui näitan teile, kuidas luua oma Firebase'i rakendus.

Enne kui liigume tegevuste moodulisse, tutvustame mõnda sõna Firebase reaalajas andmebaasi toimimise kohta. Meie puhul salvestame ülesannete loendi andmebaasi. Me kutsume neid “todos”. Sellesse ülesannete loendisse lisame kuulaja ja iga kord, kui loend muutub, saab meie rakendus teada, et andmed on muutunud. See tõmbab uued andmed Firebase'i andmebaasist ja kuvab need siis. See tähendab, et uue ülesande loomisel või täitmisel ei pea me oma rakendust käsutama andmete uuesti toomiseks. Meie rakendus teab seda.

Loogem nüüd toimingute moodul. Src-kataloogis saate luua uusi kaustatoiminguid. Ja siin looge failid index.js ja tips.js. Tüübi fail salvestab lihtsalt toimingutüüpide stringikonstandid. Indeks on sisendpunkt meie toimingute moodulile ja sisaldab täpselt 3 toimingut. addToDo lisab vahekaartide loendisse uue ülesande, tervikToDo eemaldab selle. Ja fetchToDos kuulab muudatusi ja kui neid on, tõmbab need andmed. Siis helistatakse dispetšermeetodile. See meetod võtab ühe argumendi, milleks on objekt tüübi ja kandevõimega. Tüüp tähistab toimingu tüüpi, nii et reduktor teaks, kas ta peaks toiminguga hakkama saama. Ja kasulik koormus tähistab tegelikke andmeid.

Nüüd on aeg liimida kõik need asjad React komponendi abil kokku. Kõigepealt loogem aga kõigepealt oma Firebase'i rakendus

Rakenduse Firebase loomine

  1. Minge aadressile https://console.firebase.google.com/u/0/
  2. Logige sisse oma google'i kontoga ja klõpsake siis nuppu Lisa projekt
  3. Valige projekti nimi ja piirkond ning klõpsake nuppu Loo projekt
  4. Te peaksite nägema Firebase armatuurlauda
Firebase armatuurlaud

Loogem nüüd Firebase'i konfiguratsioonifail, mis tegelikult ütleb Firebase SDK-le, millist rakendust me kasutame. Seadistage konfiguratsioonikataloog klahvid.js. See kontrollib, kas oleme tootmisrežiimis või mitte. Asi, mida te ei soovi oma võtmetega jagada. Loome dev.js ja prod.js. Kujundusfail sisaldab tegelikke stringe, kuid te ei avalda seda faili kunagi. Prod fail viitab ainult keskkonnamuutujatele.

Nüüd peate lihtsalt dev.js täitma oma tegelikud väärtused. API-võtme ja projekti ID leiate projekti sätetest Firebase armatuurlaual. Andmebaasi seadistamiseks toimige järgmiselt

Pärast seda näete oma andmebaasi URL-i. See peaks olema

.firebaseio.com”

Tippige kõik need väärtused dev.js-le ja teie Firebase'i rakendus on ühendatud Firebase SDK-ga. Nüüd on aeg kõik need osad kokku liimida ja tulemus on funktsionaalne

Ühendades kõik kokku

Saime kõik asjad nüüd valmis. Peame lihtsalt looma 2 komponenti ja hoidma need ladustamiseks kokku. Meil on ToDoListItem ja ToDoList.

Src-kataloogis saate luua uusi kataloogikomponente. Siit saate luua ToDoListItem.js. See komponent lihtsalt muudab tegeliku ülesande. See näitab, mis on tegelik ülesanne ja sisaldab nuppu. Kui nuppu klõpsatakse. Ülesanne on lõpetatud ja eemaldatud. Selles komponendis kasutame toimingut completeToDo. Selle komponendi toimingute lisamiseks kasutame ühendamismeetodit. See võtab 2 argumenti. Esimene on funktsioon, mis võtab andmeid poest, ja teine ​​on objekti sisaldavaid toiminguid.

Nüüd komponendi ToDoList kohta. See sisaldab lihtsat vormi uue ülesande loomiseks. See vorm ilmub siis, kui klõpsame nupul Lisa. Ja see kaob, kui sellele uuesti klõpsame. See komponent käivitab vormi esitamisel addToDo toimingu. Ja see kuulab muudatusi andmebaasis, kasutades toimingut fetchToDos. Kasutame taaskord ühendamismeetodit. Seekord võtab see ka funktsiooni mapStateToProps. Seal me ütleme, et tahame juurde pääseda kaupluse andmetele. Kui laos olevaid andmeid uuendatakse, värskendatakse ka meie komponenti. Lõpuks loome selle komponendi jaoks ka CSS-faili ja importige see.

Meil on kõik valmis. Viimane ülesanne on muuta rakenduse komponent ToDoListi kasutamiseks. Ja meie taotlus on valmis.

Ja see oligi. Lõime reduktoritega poe ja lisasime selle oma rakendusele. Lõime toimingumooduli ja käivitame need toimingud oma komponentides. Lõime 2 komponenti. Komponent on ühendatud kauplusega ja see võib käivitada ka toiminguid. Ja selle tulemuseks oli funktsionaalne ToDo rakendus. Rakenduse lähtekood on saadaval Githubis.

Halb on see, et seda saab kasutada koos mitme kasutajaga. Sest praegu ei jälgi me, kellele ülesanne kuulub. Teeme seda järgmises postituses. Näitame, kuidas Firebase abil autoriseerimist teha ja viime rakenduse reaalsesse maailma.

Tänan tähelepanu eest. Kui lugu meeldis ja õppisite midagi uut, andke maailmale plaksutamisest teada. Kui soovite rohkem näha, klõpsake nuppu Jälgi. Loon iga nädal selliseid õpetusi. Kui te ei ole reageerimisega tuttav, on mul teie jaoks olemas mitu õppematerjali. Saate neid vaadata siit: https://medium.com/@bernardbad. Täname tähelepanu eest ja näeme järgmine kord.