Kā integrēt React Redux un Firebase 3 vienkāršās darbībās

Šajā rakstā jūs uzzināsit, kā:

  • Izmantojot React, izveidojiet lietojumprogrammai vienkāršu lietotāja saskarni
  • Pievienojiet Redux veikalu lietojumprogrammai React
  • Pievienojiet Firebase reāllaika datu bāzi ar Redux veikalu
  • Apvieno šīs 3 lietas, lai izveidotu pilnībā funkcionālu programmu To-Do

Pirms mēs ienirt šajos 3 pīlāros. Lūk, kā izskatīsies lietojumprogrammas plūsma. Mūsu komponents izraisīs darbību. Veicot šo darbību, Firebase reāllaika datu bāzē tiks pieprasīti daži pieprasījumi. Tad dati no Firebase nonāks mūsu reduktorā. No reduktora līdz veikalam. Un no veikala komponents var piekļūt datiem. Nekas iedomājams, bet darbu tas paveikts.

Lietojumprogrammu plūsma, integrējot Firebase

Vienkārša lietotāja interfeisa izveidošana

Lai izveidotu mūsu katlu plātni, mēs izmantosim paketi izveidot-reaģēt. Ja jums tas vēl nav pieejams, vienkārši palaidiet npm, instalējiet -g izveidot-reaģēt-app. Pēc tam dodieties uz direktoriju, kurā vēlaties atrast savu projektu, un palaidiet izveidot-reaģēt-lietotne reaģēt-redux-firebase vai jebkuru vārdu, kas jums šķiet piemērots. Iekšējā src direktorijā noņemiet nevajadzīgos failus. Tur atstājiet tikai index.js App.js un registerServiceWorker.js. Neaiztieciet reģistruServiceWorker.js. Citi faili izskatīsies šādi.

Labi. Mums ir labs sākumpunkts. Tagad ir ideāls laiks, lai izveidotu Redux veikalu mūsu lietojumprogrammai un savienotu to.

Redux veikala pievienošana lietojumprogrammai React

Veikals atrodas tajā vietā, kur atradīsies visi mūsu lietojumprogrammas dati. Kad komponentam nepieciešami daži dati. Mēs vienkārši pievienojam to veikalam un pēc tam varam piekļūt paša komponenta datiem. Lai to izdarītu, vispirms mums jāinstalē pāris pakotnes. Projekta iekšējā vadīšana

npm instalēt - saglabājiet redux react-redux redux-thunk

Labi ... Mums ir visas atkarības, kā izveidot veikalu. Tagad izveidosim reduktoru moduli. Iekšējā src direktorijā izveidojiet jaunu mapi ar nosaukumu reduktori. Iekšējā reduktoru direktorijā izveidojiet failu dataReducer.js. Tagad reduktors ir tikai vienkārša funkcija ar 2 argumentiem. Sākotnējais stāvoklis un darbība. Visas darbības, ko izraisa komponents, iziet cauri visiem reduktoriem. Tagad katrs reduktors pārbauda darbības veidu, un, ja tas ir tipa samazinātājs zina, tas atjaunina saglabātos datus.

Šādi izskatīsies mūsu reduktors. Tas pārbauda, ​​vai darbības veids ir FETCH_TODOS, un vai tas ir tāds, tas atjaunina mūsu veicamo uzdevumu sarakstu. Tagad reduktoru direktorijā izveidojiet failu index.js. Tas būs sākuma punkts mūsu reduktoriem. Šeit mēs varam apvienot vairākus reduktorus. Mūsu gadījumā mums ir tikai viens, bet, ja nākotnē lietojumprogramma palielināsies, mums noteikti būs nepieciešami vairāki reduktori.

Ja mēs pievienotu jaunu reduktoru, mēs vienkārši izveidojam jaunu failu reduktoru direktorijā. Tad importējiet to. Un visbeidzot pievienojiet to funkcijaiRedducētāji. Šī funkcija ņem visus reduktorus un apvieno tos vienā. Un arī pasaka, kurš reduktors ir atbildīgs par kādiem veikalā esošajiem datiem.

Kad reduktoru modulis ir gatavs, mēs varam izveidot veikalu un pievienot to mūsu lietojumprogrammai. Projekta saknes direktorijā atveriet index.js. Šajā failā mēs sakām, ka vēlamies atveidot lietotnes komponentu. Lai pievienotu lietotni glabāšanai, mums tā jāiesaiņo nodrošinātāja komponentā. Piegādātājs ņem veikala rekvizītu, kas apzīmē lietojumprogrammu veikalu. Veikala izveidošanai mēs izmantojam helper metodi no redux paketes. Šī metode prasa mūsu reduktorus, vidusmēra izstrādājumus, ja vēlamies tos izmantot un izveido veikalu. Indekss.js izskatīsies tieši šādi. Un tas arī viss Tagad mums ir veikals, kas savienots ar mūsu lietojumprogrammu.

Firebase reāllaika datu bāzes savienošana ar Redux veikalu

Šis solis varētu izskatīties kā smagā daļa, bet patiesībā ir ļoti viegls. Vispirms instalēsim atkarības, un mēs sadalīsim, kā darbojas Firebase datu bāze.

npm instalēt - saglabājiet Firebase

Tagad mums ir jāinicializē Firebase mūsu lietojumprogrammā. Izveidojiet jaunu direktoriju konfigurāciju un izveidojiet jaunu failu firebase.js. Šeit mēs importējam Firebase SDK, lai inicializētu lietotnes izveides datu bāzes atsauci un eksportētu to. Mēs izmantosim datu bāzes atsauci uz uzdevumiem, lai izveidotu jaunas takes vai vēlāk tās pabeigtu darbību modulī. Jūs varētu jautāt, kas ir objekts FirebaseConfig. Mēs to izveidosim vēlāk, kad parādīšu, kā izveidot savu Firebase lietojumprogrammu.

Pirms pārejam uz darbību moduli, pastāstīsim par to, kā darbojas Firebase reāllaika datu bāze. Mūsu gadījumā uzdevumu sarakstu mēs glabāsim datu bāzē. Mēs tos saucam par “todos”. Mēs pievienosim klausītāju šim uzdevumu sarakstam, un katru reizi, mainoties sarakstam, mūsu lietojumprogramma zinās, ka ir notikušas izmaiņas datos. Tas ielādēs jaunos datus no Firebase datu bāzes un pēc tam parādīs tos. Tas nozīmē, ka mums nav jāpasaka mūsu lietojumprogrammai, lai atkal ielādētu datus, kad izveidojam jaunu uzdevumu vai to pabeidzam. Mūsu pieteikums to zinās.

Tagad izveidosim darbību moduli. Src direktorijā izveidojiet jaunas mapes darbības. Un šeit izveidojiet failus index.js un tips.js. Veida failā tiek glabātas virkņu konstantes darbību tipiem. Indekss ir ieejas punkts mūsu darbību modulim, un tajā būs precīzi 3 darbības. addToDo pievienos jaunu uzdevumu cilņu sarakstam, completeToDo to noņems. Un fetchToDos uzklausīs izmaiņas, un, ja tādas ir, tā ielādēs datus. Tad tas izsauks nosūtīšanas metodi. Šī metode ņem vienu argumentu, kas ir objekts ar veidu un lietderīgo slodzi. Tips norāda darbības veidu, lai reduktors zinātu, vai tam vajadzētu rīkoties. Un kravnesība atspoguļo faktiskos datus.

Tagad ir laiks visas šīs lietas salīmēt, izmantojot komponentu React. Vispirms vispirms izveidosim savu Firebase lietojumprogrammu

Firebase lietojumprogrammas izveidošana

  1. Dodieties uz vietni https://console.firebase.google.com/u/0/
  2. Piesakieties, izmantojot savu google kontu un pēc tam noklikšķiniet uz Pievienot projektu
  3. Iestatiet projekta nosaukumu un reģionu un noklikšķiniet uz Izveidot projektu
  4. Jums vajadzētu redzēt Firebase informācijas paneli
Firebase informācijas panelis

Tagad izveidosim Firebase konfigurācijas failu, kurā faktiski būs norādīts Firebase SDK, kādu lietojumprogrammu mēs izmantojam. Konfigurācijas direktorijā izveidojiet keys.js. Tas pārbaudīs, vai mēs darbojamies ražošanas režīmā. Lieta, par kuru jūs nevēlaties dalīties ar jūsu taustiņiem. Mēs izveidojam dev.js un prod.js. Izstrādājuma failā būs faktiskās virknes, taču jūs nekad nepublicēsit šo failu. Izstrādātajā failā būs atsauce tikai uz vides mainīgajiem.

Tagad jums vienkārši jāaizpilda dev.js ar faktiskajām vērtībām. API atslēgu un projekta ID var atrast projekta iestatījumos Firebase informācijas panelī. Lai iestatītu datu bāzi, rīkojieties šādi

Pēc tam jūs varat redzēt savu datu bāzes URL. Tā tam vajadzētu būt

.firebaseio.com”

Ierakstiet visas šīs vērtības dev.js, un jūsu Firebase lietojumprogramma ir savienota ar Firebase SDK. Tagad ir laiks visas šīs detaļas salīmēt kopā, un rezultāts būs funkcionāls pielietojums

Apvienojot visus kopā

Mēs saņēmām visas lietas, kas tagad ir sagatavotas, mums vienkārši jāizveido 2 komponenti un jāpiestiprina tos glabāšanai. Mums būs ToDoListItem un ToDoList.

Iekšpusē src direktorijā izveidojiet jaunus direktoriju komponentus. Šeit izveidojiet ToDoListItem.js. Šis komponents tikai padara reālo uzdevumu. Tas parāda, kas ir faktiskais uzdevums, un tajā ir poga. Kad tiek noklikšķināts uz pogas. Uzdevums ir pabeigts un noņemts. Šajā komponentā mēs izmantojam pilnīgu darbību. Lai šim komponentam pievienotu darbības, mēs izmantojam savienojuma metodi. Tas prasa 2 argumentus. Pirmais ir funkcija, kas ņem datus no veikala, un otrā ir objektus saturošas darbības.

Tagad par ToDoList komponentu. Tajā būs vienkārša forma jauna uzdevuma izveidošanai. Šī forma parādīsies, kad mēs noklikšķināsim uz pievienošanas pogas. Un tas pazudīs, kad mēs to vēlreiz noklikšķināsim. Iesniedzot veidlapu, šis komponents aktivizēs darbību AddToDo. Un tas uzklausīs izmaiņas datu bāzē, izmantojot fetchToDos darbību. Mēs atkal izmantosim savienojuma metodi. Šoreiz ir nepieciešama arī mapStateToProps funkcija. Tur mēs sakām, ka mēs vēlamies piekļūt datiem no veikala. Ja noliktavā esošie dati tiek atjaunināti, tiek atjaunināta arī mūsu sastāvdaļa. Visbeidzot izveidosim arī CSS failu un importēsim to.

Mums viss ir sakārtots. Tagad pēdējais ir mainīt App komponentu, lai izmantotu ToDoList. Un mūsu pieteikums ir pabeigts.

Un tā arī bija. Mēs izveidojām veikalu ar reduktoriem un pievienojām to mūsu lietojumprogrammai. Mēs izveidojām darbību moduli un pēc tam aktivizējam šīs darbības savos komponentos. Mēs izveidojām 2 komponentus. Komponents ir savienots ar veikalu, un tas var arī izraisīt darbības. Un tā rezultātā tika izveidota funkcionālā ToDo lietojumprogramma. Lietojumprogrammas avota kods ir pieejams vietnē Github.

Sliktā lieta ir tā, ka to var izmantot vairākiem lietotājiem. Jo tagad mēs nesekojam līdzi tam, kurš uzdevums pieder. Mēs to darīsim nākamajā ziņojumā. Mēs parādīsim, kā veikt autorizāciju, izmantojot Firebase, un mēs ieviesīsim lietojumprogrammu reālajā pasaulē.

Paldies par jūsu uzmanību. Ja jums patika stāsts un jūs uzzinājāt kaut ko jaunu, dariet pasauli zināmu, aplaudējot. Ja vēlaties redzēt vairāk, noklikšķiniet uz pogas Sekot. Katru nedēļu veidoju tādas apmācības, kā šī. Ja jūs neesat pazīstams ar reaģēšanu, man ir vairākas apmācības instrukcijas, lai jūs sāktu. Jūs varat tos pārbaudīt šeit: https://medium.com/@bernardbad. Paldies par uzmanību vēlreiz un tiksimies nākamreiz.