Jadi penyimpanan itu bagus, mengambil juga akan menjadi manis dan pada akhirnya, saya ingin memastikan
bahwa ketika kita misalnya mengunjungi layar ikhtisar produk, kita
cukup menjangkau ke server dan mendapatkan semua produk dari sana, sehingga pada layar
ini , setiap
kali kami mengunjunginya, kami memuat produk terbaru.
Sekarang untuk itu, kita perlu mengirim permintaan HTTP dari sana
dan oleh karena itu pada akhirnya apa yang ingin saya lakukan adalah saya ingin mengirimkan tindakan Redux baru yang akan menjangkau
server, mendapatkan produk saya dari sana dan kemudian mengatur produk di toko saya. Jadi saya butuh aksi baru di sini,
set produk, yang sebelumnya tidak saya butuhkan karena kami hanya bekerja dengan produk dummy tapi sekarang
bukan itu masalahnya, jadi set produk sekarang harus dikirim dan saya akan membutuhkan pembuat aksi baru di
sini yang saya akan beri nama mengambil produk. Untuk ini saya tidak memiliki pengidentifikasi karena saya tidak akan pernah
mengirimkan ini sebagai tindakan yang harus mencapai peredam,
sebaliknya ini hanya akan menjadi pembuat tindakan saya dengan kode async dengan permintaan HTTP.
Itu tidak akan memerlukan argumen apa pun tetapi berkat Redux Thunk, ia mengembalikan fungsi yang mendapatkan fungsi pengiriman sebagai
argumen dan pada akhirnya, saya ingin mengirim objek
tindakan di mana jenisnya mengatur produk dan di mana saya ingin meneruskan saya produk tapi tentu saja itu bukan
array kosong tetapi produk yang saya dapatkan dari API saya. Jadi, oleh karena itu, kita dapat menyalin kode
ini di sini, termasuk bagian pengiriman async di sini, sepanjang jalan di sana di mana kita mendapatkan data respons,
menyalinnya dari membuat produk dan
mengganti bagian ini di sini dengannya dan sekarang yang kita lakukan adalah kami mengirim permintaan ke
URL yang sama seperti sebelumnya yang masuk akal karena di
situlah produk disimpan.
Namun sekarang saya ingin menetapkan permintaan get dan itu sebenarnya default ketika kita
menggunakan fetch, jadi kita tidak perlu mengatur ini. Untuk permintaan dapatkan, Anda juga tidak perlu mengatur header
dan
Anda tidak dapat mengatur badan, jadi sebenarnya di sini, kita sepenuhnya dapat menyingkirkan argumen kedua
ini pada pengambilan, kami hanya mengirim permintaan pengambilan seperti ini.
Sekarang respons akan mendapatkan kembali data kami, tetapi sekarang ada satu karakteristik penting tentang format
data itu dan yang terbaik adalah jika kita melihatnya saja.
Jadi, biarkan saya konsol mencatat data respons di sini dan mengomentari ini untuk saat ini atau kita dapat membiarkannya di sana, tidak
ada salahnya, tidak
melakukan apa pun yang berguna, kami tidak menangani
ini di peredam namun mari kita log ini dan sekarang mari kita pergi ke layar ikhtisar produk
dan pastikan bahwa di sana, kami mengirimkan tindakan mengambil produk ini. Sekarang syukurlah, saya sudah mendapatkan akses ke
fungsi pengiriman Redux di ikhtisar produk, jadi sekarang saya hanya
perlu menambahkan efek penggunaan sehingga saya bisa memecat ini kapan pun komponen ini dimuat.
Jadi di sini, saya dapat menambahkan efek penggunaan dan dalam fungsi saya di sini, saya dapat memanggil pengiriman dan
sekarang menjangkau tindakan produk saya yang karena
itu saya perlu mengimpor sebagai tindakan produk dari produk tindakan toko, seperti ini, yang seharusnya menjadi tindakan dan sekarang menggunakan tindakan produk di sini untuk menjalankan tindakan mengambil
produk saya yang pada akhirnya akan membuat permintaan HTTP ini dan efek ini akan
berjalan setiap kali komponen saya dimuat. Jadi saya bisa menambahkan array kosong dan benar-benar menambahkan satu-satunya ketergantungan
saya yang saya kirim, di
sini hanya ketergantungan yang kita tentukan di dalam komponen kita, sehingga ini sebenarnya tidak akan pernah dijalankan kembali.
Satu-satunya waktu akan berjalan adalah ketika komponen ini dimuat dan itulah yang seharusnya terjadi,
setiap kali saya akan
mengunjungi layar, saya ingin mengaktifkan efek ini di sini.
Jadi jika saya sekarang menyimpan ini, mari kita simpan ini dan sekarang saat
ini dimuat, Anda lihat di sini di log, inilah yang terjadi di sini baik di Android dan iOS yang mengapa
saya melihat ini dua kali.
Inilah yang saya dapatkan kembali
pada akhirnya, objek ini dikembalikan oleh Firebase.
Ini adalah objek dengan semua produk saya dan saya hanya punya satu yang mengapa saya hanya melihat satu di sini
dan setiap objek dicocokkan dengan ID uniknya tetapi
itu penting.
Kami tidak mendapatkan kembali dalam array, kami mendapatkan kembali suatu objek dengan ID unik sebagai kunci dan nilai
untuk kunci ini adalah data objek saya dan kami hanya perlu tahu bahwa untuk menanganinya dengan benar.
Jadi kembali dalam
tindakan kami, seperti inilah tampilan data respons,
tentu saja di aplikasi saya, saya bekerja dengan array, jadi saya perlu mengubah ini.
Jadi produk saya yang dimuat atau yang ingin Anda panggil di sini
harus berupa array kosong dan sekarang kita dapat mengulangi objek itu untuk
memetakan data objek, produk dalam objek ke produk dalam array.
Ini relatif mudah dilakukan, kita dapat menambahkan loop for / in di sini dengan kunci kita di
mana kita pergi melalui semua data respons yang kita ambil di sini pada akhirnya dan kemudian di sini, saya menambahkan setiap produk ke produk saya yang
dimuat dengan push, sehingga ini Array tumbuh dari waktu ke waktu dan
apa yang saya tambahkan di sini pada akhirnya hanyalah produk baru, menggunakan model produk yang karena itu Anda
perlu
mengimpor, jadi pastikan Anda memiliki impor di sini menunjuk ke folder model Anda dan di
sana di file produk dan
saya buat produk baru di sini di mana ID saya adalah kunci itu karena itu adalah ID unik di sini yang
kita miliki di objek yang ingin kita ulas, lalu hal pengguna itu, yaitu U1 masih, data dummy karena kita tidak
memiliki data pengguna yang terlibat di sini dan kemudian kita harus melihat ke objek yang kita dapatkan kembali dari Firebase untuk mendapatkan
judul dan seterusnya.
Jadi di sini, judul kami untuk produk baru yang kami buat ini hanyalah resData untuk kunci yang diberikan. judul dan sama tentu saja
di sini
untuk imageUrl, jadi. imageUrl. Untuk uraian
dan tentunya juga untuk harganya, seperti itu. Jadi ini menambahkan semuanya ke produk yang dimuat dan sekarang produk yang dimuat akan
menjadi array yang diisi yang dapat saya tambahkan di sini untuk tindakan yang dikirim, ke tindakan
produk yang ditetapkan.
Jadi satu-satunya hal yang hilang adalah bahwa kita sekarang pergi ke peredam dan di sana, kita dapat menangani produk yang ditetapkan, mungkin
di sini sebagai kasus pertama tetapi tentu saja posisinya tidak masalah. Tambahkan set produk di sini dan
untuk itu, pastikan Anda mengimpornya dari file tindakan Anda dan kemudian di sana, itu adalah
hal yang sangat sepele yang akan kami lakukan. Pada akhirnya saya hanya perlu
mengembalikan status baru di mana produk yang tersedia setara dengan tindakan. produk, jadi ke produk yang saya dapatkan di sini di pembuat tindakan saya
yang saya tambahkan ke tindakan saya kirim. Dan untuk produk
pengguna, sangat mirip, ada aksi. produk, hanya disaring untuk semua produk yang memiliki ID pengguna saya, jadi seperti itu
dan saat ini karena kode dummy saya di sini di mana saya hardcode ID pengguna saya, yang tentu
saja berarti bahwa semua produk yang dimuat diperlakukan sebagai produk saya.
Ini adalah sesuatu yang akan kami ubah nanti setelah kami menambahkan otentikasi. Jadi dengan itu, sekarang jika ini dimuat
ulang, Anda lihat kita mulai dengan data dummy tetapi kemudian ini segera diganti
dengan data yang dimuat ini. Jadi memuat data berfungsi dengan baik,
kita dapat bekerja dengan itu seperti yang kita bisa dengan data kita sendiri di sini.
Tentu saja kami tidak menyimpan pesanan di server dan hal-hal seperti itu tetapi kami dapat memuat data
kami yang sebelumnya kami simpan di server.