Jadi di pembuat produk tindakan yang saat ini merupakan fungsi yang hanya mengembalikan suatu tindakan,
kita sekarang dapat men-tweak ini sedikit. Alih-alih mengembalikan suatu tindakan, kita sekarang dapat
mengembalikan
fungsi lain di sana berkat Redux Thunk, berkat paket ini kita dapat melakukan ini sekarang dan ini akan
menjadi fungsi yang menerima fungsi pengiriman sebagai argumen dan kemudian pada gilirannya perlu mengirimkan sebuah tindakan. Jadi di sini, dalam fungsi pengembalian ini, saya sekarang
tidak
perlu mengembalikan ini tetapi mengirimkan tindakan ini, itulah
perbedaan penting dan saya kehilangan kurung kurawal di sini.
Jadi apa yang terjadi?
Saya mengubah membuat produk menjadi fungsi yang sebenarnya masih dapat kami kirim dari dalam komponen kami, tetapi yang sekarang
masih dapat berfungsi seperti sebelumnya, jadi
kami tidak perlu mengubah semua pembuat tindakan ini, sehingga Anda dapat tetap menggunakan sintaks lama
tapi sekarang terima kasih kepada Redux Thunk, sebuah sintaks alternatif sehingga dapat dikatakan
juga didukung di mana fungsi pembuat tindakan ini tidak segera mengembalikan objek tindakan tetapi sebaliknya, di mana
ia mengembalikan suatu fungsi dan jika ya, Redux Thunk akan turun tangan dan memastikan bahwa semuanya
masih berfungsi dan jika ia mengembalikan suatu fungsi, maka ini adalah fungsi yang harus menerima
argumen, fungsi pengiriman yang akan diteruskan secara otomatis oleh Redux Thunk, jadi Redux Thunk pada akhirnya akan
memanggil
fungsi ini untuk Anda dan karenanya Anda dapat kemudian kirim tindakan baru dan di sini, kirim
objek tindakan aktual yang sebelumnya ingin kami kirimkan tetapi sebelum Anda
melakukannya, Anda sekarang dapat menjalankan kode async yang Anda inginkan dan itu akan diizinkan dan tidak akan merusak Redux Anda
mengalir karena Redux Thunk akan membereskan hal ini dan Anda dapat mempelajari lebih lanjut
tentang ini di Kursus Bereaksi saya misalnya atau tentu saja
dalam dokumentasi Redux Thunk resmi, juga dalam dokumen resmi Redux sebenarnya.
Jadi sekarang di sini kita dapat mengirim permintaan HTTP dan di React Native, kita dapat menggunakan
fetch API yang built-in dan fetch
here berfungsi pada dasarnya seperti fetch API di browser tempat ini juga tersedia.
Dibutuhkan URL yang ingin Anda kirimi permintaan dan itulah URL yang kami dapatkan di sini, jadi
saya hanya akan menyalin URL itu dari Firebase dan memasukkannya di sini.
Sekarang mengambil suara sepertinya selalu hanya mengambil
data, jadi jika mendapat data tetapi sebenarnya namanya agak membingungkan di sini, itu tidak hanya digunakan untuk
mendapatkan data, Anda juga dapat menggunakannya untuk mengirim permintaan pos
atau permintaan put, jadi apa saja jenis permintaan HTTP. Sekarang juga kami tidak hanya mengirim permintaan ke URL ini,
tetapi sekarang seperti yang saya katakan, Firebase menerjemahkan permintaan Anda ke jenis permintaan basis data dan struktur basis data, sehingga Anda dapat menambahkan
simpul yang Anda inginkan di sini, setiap segmen yang
Anda inginkan, seperti misalnya produk dan Firebase akan membuat semacam folder di sini di basis data dan menyimpan data
Anda di sana.
Penting dan itu hanya hal spesifik Firebase, Anda perlu menambahkan. json di sini.
Jadi itu tidak diperlukan karena Bereaksi Asli atau karena Javascript atau karena permintaan HTTP, ini
hanya hal khusus Firebase. Secara default, ini akan mengirim
permintaan get tetapi untuk menyimpan data Firebase menginginkan permintaan posting dan mengirimkannya, kita harus memberikan
argumen kedua untuk mengambil yang seharusnya berupa objek Javascript. Dalam argumen kedua itu, Anda dapat mengatur
kunci metode dan mendeskripsikan metode HTTP permintaan ini dan yang dapat diperoleh, diletakkan, dan seterusnya, dan
di sini harus ada pos yang menambahkan produk ini yang akan kami kirim ke simpul ini yang
akan dibuat di sana.
Sekarang Anda juga dapat mengatur beberapa tajuk di sana dan kami
perlu mengatur tajuk, kami perlu menambahkan tajuk tipe konten dan Anda cukup menambahkan tajuk sebagai objek dan kemudian
memiliki pasangan nilai kunci dengan tajuk pengenal tajuk sebagai kunci dan nilainya sebagai nilai dan di sini
nilainya adalah aplikasi / json untuk memberi tahu Firebase bahwa kami akan mengirim beberapa data
JSON dan kemudian kami perlu melakukannya.
Kita perlu menambahkan tubuh dengan data yang ingin kita tambahkan ke permintaan ini dan data harus
dalam format JSON.
Untungnya, React Native mendukung objek JSON yang juga didukung Javascript sisi-browser dan di sana
kita dapat memanggil stringify untuk mengubah array Javascript atau objek menjadi format JSON, jadi menjadi string pada
akhirnya dan di
sana, saya ingin menambahkan produk saya. Jadi pada akhirnya, saya ingin
merangkai objek di sini yang memegang judul saya, deskripsi saya,
imageUrl saya dan harga saya, bukan ID
karena sebenarnya Firebase akan menghasilkan ID untuk kami di sini yang benar-benar nyaman.
Sekarang ini akan mengirimkan permintaan tetapi tentu saja saya hanya ingin membuat produk secara lokal
jika permintaan itu berhasil karena saya sebenarnya dapat juga menggunakan ID yang dibuat secara otomatis
yang Firebase akan kembali kepada saya dan mengambil dengan mudah mengembalikan janji, yang merupakan objek Javascript ini yang pada akhirnya akan menentukan
nilai di masa mendatang atau membuat kesalahan di masa depan.
Jadi untuk menunggu tanggapan ini, kita dapat menambahkan kemudian di sini setelah mengambil, jadi pada janji
ini dan kita akan mendapatkan tanggapan kita di sini sehingga kita dapat melakukan apa saja dengan tanggapan tersebut.
Anda juga dapat mendengarkan kesalahan dengan tangkapan dan itu adalah sesuatu yang
seharusnya sudah Anda ketahui
karena janji tidak spesifik Bereaksi asli, itu vanila Javascript dan Bereaksi Asli juga mendukung async yang
lebih modern, menunggu sintaks daripada menunggu dan menangkap. Untuk menggunakannya, Anda menambahkan async di sini di depan fungsi
Anda, kata kunci async ini dan sekarang Anda dapat menunggu respons Anda di sini dan menyimpannya dalam konstanta dengan sintaks ini, dengan
kata kunci yang menunggu.
Sekarang di belakang layar, ini mengubah ini ke sintaks lama dengan itu, jadi
ini seperti jika Anda menambahkan kemudian di sini dan Anda menggunakan respons Anda dalam panggilan balik yang Anda dapatkan di sana.
Tapi ini sedikit lebih mudah dibaca karena itulah saya akan menggunakan sintaks menunggu async
ini, hanya perlu menyadari fakta bahwa ini seperti menambahkan kemudian, hanya lebih mudah dibaca. Ketika Anda menggunakan async yang menunggu, fungsi ini di
sini akan selalu secara otomatis memberikan janji, oleh karena itu seluruh fungsi produk
yang
dibuat ini sekarang mengembalikan janji.
Itu tidak melakukan itu
sebelumnya, sekarang
akan, Anda lihat di sini, sekarang kembali janji. Jadi itulah tanggapan kami,
respons ini sekarang bisa dibongkar untuk mendapatkan data di sana, jadi
data tanggapan, yang dilakukan dengan memanggil respons. json, itulah metode yang tersedia pada
objek respons yang kita peroleh. Ini lagi adalah tugas async yang harus kami
tunggu dan sekarang ini pada akhirnya akan memberi kami data yang dikembalikan oleh Firebase ketika kami menambahkan produk.
Sekarang kita dapat untuk sekarang cukup mencatat data respons itu untuk melihat apa yang ada di sana dan saya masih mengirimkan
tindakan saya di sini tetapi karena kami telah menunggu di sini dan oleh karena itu seperti dalam beberapa
blok maka ini hanya akan dikirim setelah operasi ini di sini selesai
Jadi dengan itu, mari kita simpan ini dan mari kita tambahkan produk baru dengan pergi ke bagian
admin di sini dan kemudian saya akan
menambahkan kemeja putih, saya memilih imageUrl yang bagus untuk
itu, ini dia.
Katakanlah harganya 39. 99, ini adalah kemeja putih yang cukup gaya.
Jika saya sekarang menyimpan ini, perlu memuat ini dulu, sekarang ini ditambahkan, ini dia dan
sekarang jika Anda
melihat Firebase,
kami juga melihat bahwa sekarang ada simpul produk. Di sana, ini adalah ID unik ini dan
di sana kami memiliki data yang kami kirimkan dan jika Anda melihat konsol
Anda, Anda lihat inilah yang kami dapatkan, itulah data
respons ini di sini.
Ini memegang kunci nama dan kemudian juga memegang ID ini yang dihasilkan Firebase, ini berarti bahwa ketika kami mengirim data kami di sini,
kami benar-benar dapat menambahkan kunci ID di sini dan menambahkan resData. nama untuk mengakses kunci nama ini
pada respons balasan oleh Firebase untuk meneruskan ID yang dihasilkan sisi-server
pada akhirnya kami membuat produk peredam atau ke logika yang berjalan di peredam.
Jadi sekarang di peredam produk, kita sebenarnya tidak dapat menggunakan ID dummy ini di sini,
tetapi sebaliknya, berharap pada data produk kami. Di sana kita sekarang mendapatkan bidang ID yang merupakan ID yang dihasilkan
sisi-server, saya akan tetap berpegang pada ID pengguna dummy untuk saat ini, tetapi kita akan mendapatkan ID yang dihasilkan sisi-server ini di sini dan
ini dia dan oleh karena itu, kita menggunakan ini pada frontend juga yang akan penting untuk nanti ketika kita
juga menghapus barang dan sebagainya.
Jadi ini menambahkan produk tetapi tentu saja begitu kita memuat ulang aplikasi, itu hilang karena dalam aplikasi, itu
hanya disimpan dalam memori.
Sekarang kita juga menyimpannya di server tetapi kita tidak pernah mengambilnya dari server, jadi
mari kita pastikan kita melakukannya juga.