Cara Mengintegrasikan Reaksi Redux dan Firebase dalam 3 Langkah Sederhana

Di artikel ini Anda akan belajar cara:

  • Buat UI sederhana untuk aplikasi menggunakan Bereaksi
  • Lampirkan toko Redux ke aplikasi Bereaksi
  • Hubungkan basis data waktu nyata Firebase dengan Redux store
  • Gabungkan 3 hal ini untuk membuat aplikasi Agenda yang berfungsi penuh

Sebelum kita menyelam ke 3 pilar ini. Di sini adalah bagaimana aliran aplikasi akan terlihat. Komponen kami akan memicu tindakan. Tindakan ini akan melakukan beberapa permintaan pada basis data waktu nyata Firebase. Lalu data dari Firebase akan masuk ke peredam kami. Dari peredam ke toko. Dan dari komponen toko dapat mengakses data. Tidak ada yang mewah, tapi itu menyelesaikan pekerjaan.

Alur aplikasi mengintegrasikan Firebase

Membuat antarmuka pengguna yang sederhana

Kami akan menggunakan paket aplikasi-buat-reaksi untuk menghasilkan pelat boiler kami. Jika Anda belum memilikinya, jalankan saja npm install -g create-react-app. Setelah itu pergi ke direktori tempat Anda ingin proyek Anda berada dan jalankan create-react-app react-redux-firebase atau nama apa pun yang Anda temukan cocok. Di dalam direktori src hapus file yang tidak perlu. Biarkan hanya index.js App.js dan registerServiceWorker.js di sana. Jangan sentuh registerServiceWorker.js. File-file lain akan terlihat sebagai berikut.

Baik. Kami berada di titik awal yang baik. Sekarang adalah waktu yang ideal untuk membuat toko Redux untuk aplikasi kita dan menghubungkannya.

Melampirkan toko Redux untuk Bereaksi aplikasi

Store adalah tempat semua data untuk aplikasi kita akan berada. Ketika suatu komponen membutuhkan beberapa data. Kami cukup menghubungkannya ke toko dan kemudian kita dapat mengakses data dalam komponen itu sendiri. Untuk melakukannya, kita perlu menginstal beberapa paket terlebih dahulu. Di dalam menjalankan proyek direcotory

npm instal - save redux react-redux redux-thunk

Oke ... Kami memiliki semua dependensi untuk membuat toko siap. Sekarang mari kita buat modul reduksi. Di dalam direktori src buat folder baru yang disebut reduksi. Di dalam direktori reduksi buat file dataReducer.js. Sekarang peredam hanyalah fungsi sederhana dengan 2 argumen. Status dan tindakan awal. Semua tindakan yang dipicu dari komponen harus melalui semua reduksi. Sekarang setiap peredam memeriksa jenis tindakan dan jika itu adalah jenis peredam yang tahu, itu memperbarui data di toko.

Ini adalah bagaimana peredam kami akan terlihat. Ia memeriksa apakah jenis tindakannya adalah FETCH_TODOS dan jika itu memperbarui daftar tugas Agenda kami. Sekarang di dalam direktori reduksi buat file index.js. Ini akan menjadi titik masuk bagi reduksi kami. Kita dapat menggabungkan beberapa reduksi di sini. Dalam kasus kami, kami hanya memiliki satu tetapi jika aplikasi tumbuh besar di masa depan, kami pasti akan memerlukan beberapa peredam.

Jika kita ingin menambahkan peredam baru, kita cukup membuat file baru di dalam direktori reduksi. Lalu impor itu. Dan akhirnya menambahkannya ke fungsi CombedReducers. Fungsi ini mengambil semua reduksi dan menggabungkannya menjadi satu. Dan juga memberitahu peredam mana yang bertanggung jawab atas data mana yang disimpan.

Sekarang ketika kita memiliki modul reduksi, kita dapat membuat toko dan melampirkannya ke aplikasi kita. Di dalam direktori root proyek buka index.js. Dalam file ini kami katakan ingin merender komponen Aplikasi. Untuk melampirkan Aplikasi ke toko kita perlu membungkusnya dengan komponen Penyedia Penyedia mengambil prop toko yang mewakili toko aplikasi. Untuk membuat toko kami menggunakan metode helper dari paket redux. Metode ini membutuhkan reduksi kami, middlewares jika kami ingin menggunakan beberapa dan membuat toko. Index.js akan terlihat persis seperti ini. Dan itu dia. Sekarang kami telah menyimpan toko yang terhubung ke aplikasi kami.

Menghubungkan database realtime Firebase dengan Redux store

Langkah ini mungkin terlihat seperti bagian yang sulit tetapi sebenarnya sangat mudah. Pertama mari kita instal dependensi dan kami merinci cara kerja basis data Firebase.

npm instal --simpan firebase

Sekarang kita perlu menginisialisasi Firebase di aplikasi kita. Buat direktori config baru dan di dalam buat file firebase.js baru. Di sini kita mengimpor SDK firebase menginisialisasi aplikasi membuat referensi basis data dan mengekspornya. Kami akan menggunakan referensi basis data untuk todos untuk membuat taks baru atau menyelesaikannya nanti dalam modul tindakan. Anda mungkin bertanya apa itu objek FirebaseConfig. Kami akan membuatnya nanti ketika saya menunjukkan cara membuat aplikasi Firebase Anda sendiri.

Sebelum kita beralih ke modul tindakan, mari kita bicara tentang cara kerja basis data waktu nyata Firebase. Dalam kasus kami, kami akan menyimpan daftar tugas dalam database. Kami menyebutnya "todos". Kami akan melampirkan pendengar pada daftar tugas ini dan setiap kali daftar berubah, aplikasi kami akan tahu ada perubahan dalam data. Ini akan mengambil data baru dari basis data Firebase dan kemudian menampilkannya. Artinya, kita tidak perlu memberi tahu aplikasi kita untuk mengambil data lagi ketika kita membuat tugas baru atau menyelesaikannya. Aplikasi kita akan tahu itu.

Sekarang mari kita buat modul tindakan. Di dalam direktori src buat tindakan folder baru. Dan di sini buat file index.js dan types.js. Jenis file hanya menyimpan konstanta string untuk jenis tindakan. Indeks adalah titik masuk untuk modul tindakan kami dan akan berisi tepat 3 tindakan. addToDo akan menambah tugas baru ke daftar taks, completeToDo akan menghapusnya. Dan fetchToDos akan mendengarkan perubahan dan jika ada beberapa itu akan mengambil data. Maka itu akan memanggil metode pengiriman. Metode ini mengambil satu argumen yaitu objek dengan tipe dan payload. Jenis mewakili jenis tindakan sehingga peredam tahu jika harus menangani tindakan. Dan payload mewakili data aktual.

Sekarang saatnya untuk merekatkan semuanya menggunakan komponen Bereaksi. Tapi pertama-tama mari kita buat aplikasi Firebase Anda sendiri terlebih dahulu

Membuat aplikasi Firebase

  1. Buka https://console.firebase.google.com/u/0/
  2. Login dengan akun google Anda dan kemudian klik Tambah Proyek
  3. Tetapkan nama dan wilayah proyek Anda dan klik Buat Proyek
  4. Anda akan melihat dasbor Firebase
Dasbor Firebase

Sekarang mari kita buat file konfigurasi Firebase yang sebenarnya memberi tahu Firebase SDK aplikasi apa yang kita gunakan. Di dalam direktori config buat keys.js. Ini akan memeriksa apakah kita dalam mode produksi atau tidak. Hal yang tidak ingin Anda bagikan kunci. Kami membuat dev.js dan prod.js. File dev akan berisi string yang sebenarnya, tetapi Anda tidak akan pernah menerbitkan file ini. File prod hanya akan merujuk ke variabel lingkungan.

Sekarang Anda hanya perlu mengisi dev.js dengan nilai aktual Anda. Kunci API dan ID Proyek dapat ditemukan di pengaturan proyek di dalam dasbor Firebase. Untuk mengatur basis data, ikuti langkah-langkah ini

Setelah itu Anda dapat melihat URL basis data Anda. Seharusnya begitu

.firebaseio.com”

Ketik semua nilai ini untuk dev.js dan aplikasi Firebase Anda terhubung dengan firebase SDK. Sekarang saatnya untuk merekatkan semua bagian ini bersama-sama dan hasilnya akan menjadi aplikasi fungsional

Menggabungkan semuanya

Kami menyiapkan semua hal sekarang, kami hanya perlu membuat 2 komponen dan memasangnya untuk disimpan. Kami akan memiliki ToDoListItem dan ToDoList.

Di dalam direktori src membuat komponen direktori baru. Di sini, buat ToDoListItem.js. Komponen ini hanya membuat tugas yang sebenarnya. Ini menunjukkan apa tugas sebenarnya dan itu berisi tombol. Ketika tombol diklik. Tugas selesai dan dihapus. Kami menggunakan tindakan completeToDo dalam komponen ini. Untuk melampirkan tindakan ke komponen ini kami menggunakan metode connect. Dibutuhkan 2 argumen. Pertama adalah fungsi yang mengambil data dari toko dan yang kedua adalah objek yang berisi tindakan.

Sekarang untuk komponen ToDoList. Ini akan berisi formulir sederhana untuk membuat tugas baru. Formulir ini akan muncul ketika kita mengklik tombol add. Dan itu akan hilang ketika kita klik lagi. Komponen ini akan memicu tindakan addToDo saat mengirimkan formulir. Dan itu akan mendengarkan perubahan dalam database menggunakan aksi fetchToDos. Kami akan kembali menggunakan metode koneksi. Kali ini dibutuhkan juga fungsi mapStateToProps. Di sana kami memberi tahu bahwa kami ingin mengakses data dari toko. Jika data di toko diperbarui komponen kami juga diperbarui. Akhirnya mari kita juga membuat file CSS untuk komponen ini dan mengimpornya.

Kami sudah mengatur semuanya. Sekarang yang terakhir adalah mengubah komponen Aplikasi untuk menggunakan ToDoList. Dan aplikasi kita selesai.

Dan begitulah. Kami membuat toko dengan reduksi dan melampirkannya ke aplikasi kami. Kami membuat modul tindakan dan kemudian memicu tindakan ini di komponen kami. Kami membuat 2 komponen. Komponen terhubung ke toko dan juga dapat memicu tindakan. Dan ini menghasilkan aplikasi ToDo fungsional. Kode sumber aplikasi tersedia di Github.

Hal buruk tentang itu adalah dapat digunakan dengan banyak pengguna. Karena sekarang kami tidak melacak siapa yang menjadi tugas. Kami akan melakukannya di posting berikutnya. Kami akan menunjukkan cara melakukan otorisasi dengan firebase dan kami akan menyebarkan aplikasi ke dunia nyata.

Terima kasih atas perhatian anda Jika Anda menyukai ceritanya dan Anda mempelajari sesuatu yang baru, beri tahu dunia dengan bertepuk tangan. Jika Anda ingin melihat lebih banyak, tekan tombol "Follow". Saya membuat tutorial seperti ini setiap minggu. Jika Anda tidak terbiasa dengan reaksi, saya memiliki serangkaian tutorial untuk membantu Anda memulai. Anda dapat memeriksanya di sini https://medium.com/@bernardbad. Terima kasih atas perhatian Anda lagi dan sampai jumpa lagi.