React Redux və Firebase-i üç asan addımda necə birləşdirmək olar

Bu məqalə sizə aşağıdakıları göstərir:

  • React istifadə edərək tətbiq üçün sadə bir istifadəçi interfeysi yaradın
  • Redux mağazasını React tətbiqetməsinə əlavə edin
  • Firebase real vaxt bazasını Redux yaddaşına qoşun
  • Tamamilə işləyən bir tapşırıq tətbiqi yaratmaq üçün bu üç şeyi birləşdirin

Bu 3 sütuna dalmadan əvvəl. Tətbiq belədir. Komponentimiz bir hərəkəti tetikler. Bu hərəkət Firebase real vaxt bazasında bəzi istəklər yaradır. Sonra məlumatlar Firebase-dən reduktorumuza göndərilir. Reduktordan anbara qədər. Mağaza komponentindən isə məlumat əldə edə bilərsiniz. Xüsusi bir şey yoxdur, ancaq işi bitirir.

Firebase'i birləşdirən tətbiq axını

Sadə bir istifadəçi interfeysi yaradın

Qazan plitəmizi yaratmaq üçün "reaksiya ver-tətbiq" paketini istifadə edəcəyik. Əgər sizdə hələ yoxdursa, sadəcə npm install -g create-react-app proqramını işə salın. Sonra layihənizin yerləşməli olduğu qovluğa keçin və create-react-app react-redux-firebase və ya uyğun hesab etdiyiniz hər hansı bir adı çalıştırın. Tələb olunmayan fayllar src qovluğundan silinir. Index.js App.js buraxın və qeydiyyatdan keçinServiceWorker.js. RegisterServiceWorker.js-yə toxunmayın. Digər sənədlər buna bənzəyir.

TAMAM. Yaxşı bir başlanğıc nöqtəmiz var. İndi tətbiqimiz üçün bir redux mağazası yaratmağın və ona qoşulmağın vaxtıdır.

Redux yaddaşının React tətbiqetməsinə qoşulması

Tətbiqimiz üçün bütün məlumatlar mağazada saxlanılır. Bir komponentin məlumatlara ehtiyacı olduqda. Yalnız onu mağazaya bağlayırıq və sonra komponentin özündə olan məlumatlara daxil ola bilərik. Bunu etmək üçün əvvəlcə bəzi paketləri quraşdırmalıyıq. Layihə qovluğunda

npm quraşdırma - Redux React-Redux Redux-Thunk qeyd edin

Tamam ... müqavilənin yaradılması üçün bütün asılılıqlar hazırdır. İndi bir reduktor modulu yaradaq. Src qovluğunda reduktorlar adlı yeni bir qovluq yaradın. Reduktor qovluğunda dataReducer.js faylını yaradın. İndi reduktor sadəcə 2 arqumentlə sadə bir funksiyadır. İlkin vəziyyət və fəaliyyət. Komponentin yaratdığı bütün hərəkətlər bütün endirimlərdən keçir. İndi hər bir reduktor fəaliyyət növünü yoxlayır və reduktor tipini bilirsə, saxlanılan məlumatları yeniləyir.

Azaldıcı dişlilərimiz belə görünəcəkdir. Fəaliyyət növünün FETCH_TODOS olub olmadığını yoxlayır və tapşırıqlarımızın siyahısını yeniləyir. İndi azaltma qovluğunda index.js faylını yaradın. Bu, endirimlərimizin giriş nöqtəsidir. Burada bir neçə endirimi birləşdirə bilərik. Bizim vəziyyətimizdə yalnız bir var, lakin tətbiq gələcəkdə daha da böyüyərsə, əlbəttə ki, bir neçə endirimə ehtiyacımız olacaq.

Yeni reduktor əlavə etmək istədikdə, reduktor qovluğunda sadəcə yeni bir fayl yaradırıq. Sonra idxal edin. Və nəhayət, onu CombineReducers funksiyasına əlavə edin. Bu funksiya bütün endirimləri alır və birinə birləşdirir. Mağazada hansı məlumatın hansı reduktorun məsuliyyət daşıdığını da öyrənəcəksiniz.

Düzləşdirmə modulu hazır olduqda bir mağaza yaradıb tətbiqimizə əlavə edə bilərik. Layihənin kök qovluğunda index.js faylını açın. Bu sənəddə tətbiq komponentini göstərmək istəyirik. Tətbiqi mağazaya əlavə etmək üçün onu provayder komponentinə inteqrasiya etməliyik. Təchizatçı tətbiqetmə anbarı olan saxlama dayağını götürür. Yaddaş yaratmaq üçün Redux paketindən köməkçi metodundan istifadə edirik. Bu üsul hər hansı bir istifadə etmək istəsək endirimlərimizi, orta yollarımızı alır və bir iş yaradır. İndex.js tam olaraq buna bənzəyəcək. Və bu qədər. İndi tətbiqetmə ilə əlaqəli yaddaşımız var.

Firebase real vaxt bazasının Redux yaddaşla əlaqəsi

Bu addım çətin hissəyə bənzəyir, amma əslində çox asandır. Əvvəlcə asılılıqları quraşdıraq və Firebase verilənlər bazasının necə işlədiyini izah edək.

npm quraşdırma - atəş bazasını qeyd edin

İndi tətbiqimizdə Firebase-i işə salmalıyıq. Yeni bir qovluq konfiqurasiyası yaradın və yeni bir firebase.js faylı yaradın. Burada atəş bazası SDK-nı idxal edirik, tətbiqetmənin verilənlər bazası istinadını işə salırıq və ixrac edirik. Tapşırıqlar üçün verilənlər bazası istinadını yeni tapşırıqlar yaratmaq və ya daha sonra fəaliyyət modulunda başa çatdırmaq üçün istifadə edirik. FirebaseConfig obyektinin nə olduğu soruşula bilər. Öz Firebase tətbiqinizi necə yaratacağınızı göstərdiyim zaman onu daha sonra yaradacağıq.

Əməliyyatlar moduluna keçməzdən əvvəl Firebase real vaxt verilənlər bazasının necə işlədiyini nəzərdən keçirək. Bizim vəziyyətimizdə tapşırıq siyahısını verilənlər bazasında saxlayacağıq. Onlara "Todos" deyirik. Dinləyicini bu tapşırıq siyahısına əlavə edəcəyik və hər dəfə siyahı dəyişdikdə tətbiqimiz məlumatların dəyişdiyini biləcəkdir. Yeni məlumatlar Firebase verilənlər bazasından alınır və sonra göstərilir. Bu o deməkdir ki, tətbiqetməyimizə yeni bir tapşırıq yaradıldıqda və ya bir tapşırıq tamamlandıqda yenidən məlumat almaq üçün deməyə ehtiyacımız yoxdur. Tətbiqimiz bunu biləcək.

İndi bir fəaliyyət modulu yaradaq. Src qovluğunda yeni qovluq hərəkətləri yaradın. Və burada index.js və types.js fayllarını yaradırsınız. Types faylı yalnız fəaliyyət növləri üçün sətir sabitlərini saxlayır. İndeks, fəaliyyət modulumuzun giriş nöqtəsidir və tam olaraq 3 əməliyyatı ehtiva edir. addToDo tapşırıqlar siyahısına yeni bir vəzifə əlavə edir, completeToDo onu silir. Və fetchToDos dəyişiklikləri dinləyir və varsa məlumatları çağırır. Sonra göndərmə metodu deyilir. Bu metod növü və faydalı yükü olan bir arqument tələb edir. Tip, hərəkətin növü deməkdir ki, reduktorun hərəkət edib etməyəcəyini bilsin. Və faydalı yük həqiqi məlumatları təmsil edir.

İndi bütün bunları React komponenti ilə birləşdirməyin zamanıdır. Ancaq əvvəlcə öz Firebase tətbiqatını yarataq

Firebase tətbiqi yaradılması

  1. Https://console.firebase.google.com/u/0/ ünvanına gedin.
  2. Google Hesabınızla daxil olun, sonra Layihə əlavə et düyməsini vurun
  3. Layihənizin adını və bölgəsini təyin edin və Layihə Yarat vurun
  4. Firebase panelini görməlisiniz
Firebase panel

İndi Firebase SDK-ya hansı tətbiqetməni istifadə etdiyimizi izah edəcək bir Firebase konfiqurasiya faylı yaradacağıq. Konfiqurasiya qovluğunda keys.js. yaradın. Bu istehsal rejiminin aktiv olub-olmadığını yoxlayacaqdır. Düymələrinizlə bölüşmək istəmədikləriniz. Dev.js və prod.js. yaradırıq Dev dosyası həqiqi simləri ehtiva edir, ancaq bu faylı heç vaxt dərc etməyəcəksiniz. Məhsul faylı yalnız mühit dəyişkənlərinə istinad edir.

İndi yalnız dev.js-i həqiqi dəyərlərinizlə doldurmaq lazımdır. API açarı və layihə identifikatoru Firebase panelindəki layihə parametrlərində tapıla bilər. Verilənlər bazasını qurmaq üçün aşağıdakı adımları edin

Bundan sonra verilənlər bazası URL-nizi görə bilərsiniz. Bu olmalıdır

" .firebaseio.com "

Bütün bu dəyərləri dev.js sənədinə qoyun və Firebase tətbiqetiniz Firebase SDK-ya qoşulacaq. İndi bu parçaların hamısını bir-birinə yapışdırmaq vaxtıdır. Nəticə funksional bir tətbiqdir

Hər şeyi birlikdə birləşdirin

Hər şeyimiz hazırdır, indi yalnız 2 komponent yaratmalı və onları saxlamaq üçün tel bağlamalıyıq. ToDoListItem və ToDoList olacaq.

Src qovluğunda yeni qovluq komponentləri yaradın. ToDoListItem.js yaratdığınız yer budur. Bu komponent yalnız həqiqi vəzifəni əks etdirir. Həqiqi tapşırığın nə olduğunu göstərir və bir düyməni ehtiva edir. Düymə vurulduqda. Tapşırıq yerinə yetirilib silindi. Bu komponentdə completeToDo fəaliyyətindən istifadə edirik. Hərəkətləri bu komponentə əlavə etmək üçün əlaqə metodundan istifadə edirik. Bunun üçün 2 arqument lazımdır. Birincisi, yaddaşdan məlumat götürən bir funksiyadır, ikincisi hərəkətləri ehtiva edən bir obyektdir.

İndi ToDoList komponenti üçün. Yeni bir vəzifə yaratmaq üçün sadə bir forma daxildir. Əlavə et düyməsini vurduğumuz zaman bu forma göstərilir. Yenidən vurduğumuzda yox olur. Bu komponent, forma göndərildikdə addToDo əməliyyatını tetikler. FetchToDos hərəkəti verilənlər bazasındakı dəyişiklikləri axtarır. Yenidən qoşulma metodundan istifadə edəcəyik. Bu dəfə mapStateToProps funksiyası da tələb olunur. Orada mağazadan məlumat əldə etmək istədiyimizi söyləyirik. Mağazada məlumatlar güncəlləşdikdə, komponentimiz də yenilənəcəkdir. Nəhayət, bu komponent üçün bir CSS faylı da yaradacağıq və idxal edəcəyik.

Hər şey qurulmuşdur. Etməli olduğunuz son şey, ToDoList istifadə etmək üçün tətbiq komponentini dəyişdirməkdir. Və tətbiqimiz bitdi.

Və bu idi. Bir endirim mağazası yaratdıq və tətbiqetməmizə əlavə etdik. Bir fəaliyyət modulu yaratdıq və sonra bu hərəkətləri komponentlərimizdə tetikledik. 2 komponent yaratdıq. Komponent iş ilə əlaqələndirilir və hərəkətləri də tətikləyə bilər. Bu işləyən bir ToDo tətbiqi ilə nəticələndi. Tətbiqin mənbə kodu Github-dan əldə edilə bilər.

Pis şey odur ki, birdən çox istifadəçi ilə istifadə edilə bilər. Çünki indi tapşırığın kimə məxsus olduğunu izləmirik. Bunu növbəti yazıda edəcəyik. Sizə Firebase ilə necə avtorizasiya edəcəyinizi və tətbiqi real dünyada necə tətbiq edəcəyimizi göstərəcəyik.

Diqqətinizə görə təşəkkürlər. Hekayə xoşunuza gəlsə və yeni bir şey öyrənmisinizsə, alqışlayaraq dünyaya bildirin. Daha çoxunu görmək istəyirsinizsə, "İzlə" düyməsini vurun. Hər həftə bu kimi dərsliklər yaradıram. Cavab verməklə tanış deyilsinizsə, işə başlamağınız üçün bir neçə dərs var. Buraya https://medium.com/@bernardbad daxil ola bilərsiniz. Diqqətiniz üçün təşəkkür edirəm və növbəti dəfə görüşürük.