1
00:00:02,270 --> 00:00:07,520
Jadi penyimpanan itu bagus, mengambil juga akan menjadi manis dan pada akhirnya, saya ingin memastikan

2
00:00:07,520 --> 00:00:10,510
bahwa ketika kita misalnya mengunjungi layar ikhtisar produk, kita

3
00:00:10,580 --> 00:00:15,200
cukup menjangkau ke server dan mendapatkan semua produk dari sana, sehingga pada layar

4
00:00:15,290 --> 00:00:16,510
ini , setiap

5
00:00:16,550 --> 00:00:19,390
kali kami mengunjunginya, kami memuat produk terbaru.

6
00:00:19,400 --> 00:00:22,500
Sekarang untuk itu, kita perlu mengirim permintaan HTTP dari sana

7
00:00:22,520 --> 00:00:28,250
dan oleh karena itu pada akhirnya apa yang ingin saya lakukan adalah saya ingin mengirimkan tindakan Redux baru yang akan menjangkau

8
00:00:28,250 --> 00:00:35,590
server, mendapatkan produk saya dari sana dan kemudian mengatur produk di toko saya. Jadi saya butuh aksi baru di sini,

9
00:00:35,620 --> 00:00:43,060
set produk, yang sebelumnya tidak saya butuhkan karena kami hanya bekerja dengan produk dummy tapi sekarang

10
00:00:43,060 --> 00:00:50,660
bukan itu masalahnya, jadi set produk sekarang harus dikirim dan saya akan membutuhkan pembuat aksi baru di

11
00:00:50,660 --> 00:00:58,110
sini yang saya akan beri nama mengambil produk. Untuk ini saya tidak memiliki pengidentifikasi karena saya tidak akan pernah

12
00:00:58,110 --> 00:01:01,310
mengirimkan ini sebagai tindakan yang harus mencapai peredam,

13
00:01:01,310 --> 00:01:06,110
sebaliknya ini hanya akan menjadi pembuat tindakan saya dengan kode async dengan permintaan HTTP.

14
00:01:06,110 --> 00:01:12,950
Itu tidak akan memerlukan argumen apa pun tetapi berkat Redux Thunk, ia mengembalikan fungsi yang mendapatkan fungsi pengiriman sebagai

15
00:01:13,070 --> 00:01:16,470
argumen dan pada akhirnya, saya ingin mengirim objek

16
00:01:16,490 --> 00:01:23,460
tindakan di mana jenisnya mengatur produk dan di mana saya ingin meneruskan saya produk tapi tentu saja itu bukan

17
00:01:23,480 --> 00:01:30,490
array kosong tetapi produk yang saya dapatkan dari API saya. Jadi, oleh karena itu, kita dapat menyalin kode

18
00:01:30,490 --> 00:01:38,610
ini di sini, termasuk bagian pengiriman async di sini, sepanjang jalan di sana di mana kita mendapatkan data respons,

19
00:01:38,610 --> 00:01:40,590
menyalinnya dari membuat produk dan

20
00:01:40,590 --> 00:01:47,810
mengganti bagian ini di sini dengannya dan sekarang yang kita lakukan adalah kami mengirim permintaan ke

21
00:01:47,970 --> 00:01:52,530
URL yang sama seperti sebelumnya yang masuk akal karena di

22
00:01:52,530 --> 00:01:54,380
situlah produk disimpan.

23
00:01:54,390 --> 00:01:58,650
Namun sekarang saya ingin menetapkan permintaan get dan itu sebenarnya default ketika kita

24
00:01:58,740 --> 00:02:04,380
menggunakan fetch, jadi kita tidak perlu mengatur ini. Untuk permintaan dapatkan, Anda juga tidak perlu mengatur header

25
00:02:04,380 --> 00:02:04,860
dan

26
00:02:04,890 --> 00:02:09,150
Anda tidak dapat mengatur badan, jadi sebenarnya di sini, kita sepenuhnya dapat menyingkirkan argumen kedua

27
00:02:09,150 --> 00:02:12,020
ini pada pengambilan, kami hanya mengirim permintaan pengambilan seperti ini.

28
00:02:12,210 --> 00:02:18,000
Sekarang respons akan mendapatkan kembali data kami, tetapi sekarang ada satu karakteristik penting tentang format

29
00:02:18,000 --> 00:02:21,880
data itu dan yang terbaik adalah jika kita melihatnya saja.

30
00:02:21,900 --> 00:02:28,470
Jadi, biarkan saya konsol mencatat data respons di sini dan mengomentari ini untuk saat ini atau kita dapat membiarkannya di sana, tidak

31
00:02:28,470 --> 00:02:29,680
ada salahnya, tidak

32
00:02:29,700 --> 00:02:32,050
melakukan apa pun yang berguna, kami tidak menangani

33
00:02:32,100 --> 00:02:37,200
ini di peredam namun mari kita log ini dan sekarang mari kita pergi ke layar ikhtisar produk

34
00:02:37,200 --> 00:02:44,230
dan pastikan bahwa di sana, kami mengirimkan tindakan mengambil produk ini. Sekarang syukurlah, saya sudah mendapatkan akses ke

35
00:02:44,230 --> 00:02:48,670
fungsi pengiriman Redux di ikhtisar produk, jadi sekarang saya hanya

36
00:02:48,850 --> 00:02:55,210
perlu menambahkan efek penggunaan sehingga saya bisa memecat ini kapan pun komponen ini dimuat.

37
00:02:55,210 --> 00:03:04,760
Jadi di sini, saya dapat menambahkan efek penggunaan dan dalam fungsi saya di sini, saya dapat memanggil pengiriman dan

38
00:03:04,790 --> 00:03:08,510
sekarang menjangkau tindakan produk saya yang karena

39
00:03:08,510 --> 00:03:22,210
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

40
00:03:22,250 --> 00:03:29,240
produk saya yang pada akhirnya akan membuat permintaan HTTP ini dan efek ini akan

41
00:03:29,240 --> 00:03:36,260
berjalan setiap kali komponen saya dimuat. Jadi saya bisa menambahkan array kosong dan benar-benar menambahkan satu-satunya ketergantungan

42
00:03:36,260 --> 00:03:38,300
saya yang saya kirim, di

43
00:03:38,310 --> 00:03:44,070
sini hanya ketergantungan yang kita tentukan di dalam komponen kita, sehingga ini sebenarnya tidak akan pernah dijalankan kembali.

44
00:03:44,150 --> 00:03:48,350
Satu-satunya waktu akan berjalan adalah ketika komponen ini dimuat dan itulah yang seharusnya terjadi,

45
00:03:48,410 --> 00:03:49,830
setiap kali saya akan

46
00:03:49,850 --> 00:03:52,950
mengunjungi layar, saya ingin mengaktifkan efek ini di sini.

47
00:03:53,270 --> 00:03:57,410
Jadi jika saya sekarang menyimpan ini, mari kita simpan ini dan sekarang saat

48
00:03:57,440 --> 00:04:03,780
ini dimuat, Anda lihat di sini di log, inilah yang terjadi di sini baik di Android dan iOS yang mengapa

49
00:04:03,790 --> 00:04:05,520
saya melihat ini dua kali.

50
00:04:05,560 --> 00:04:07,460
Inilah yang saya dapatkan kembali

51
00:04:07,510 --> 00:04:09,900
pada akhirnya, objek ini dikembalikan oleh Firebase.

52
00:04:09,910 --> 00:04:15,970
Ini adalah objek dengan semua produk saya dan saya hanya punya satu yang mengapa saya hanya melihat satu di sini

53
00:04:15,970 --> 00:04:18,190
dan setiap objek dicocokkan dengan ID uniknya tetapi

54
00:04:18,700 --> 00:04:19,510
itu penting.

55
00:04:19,510 --> 00:04:25,210
Kami tidak mendapatkan kembali dalam array, kami mendapatkan kembali suatu objek dengan ID unik sebagai kunci dan nilai

56
00:04:25,210 --> 00:04:30,760
untuk kunci ini adalah data objek saya dan kami hanya perlu tahu bahwa untuk menanganinya dengan benar.

57
00:04:30,760 --> 00:04:32,050
Jadi kembali dalam

58
00:04:32,050 --> 00:04:34,200
tindakan kami, seperti inilah tampilan data respons,

59
00:04:34,270 --> 00:04:38,790
tentu saja di aplikasi saya, saya bekerja dengan array, jadi saya perlu mengubah ini.

60
00:04:38,950 --> 00:04:43,980
Jadi produk saya yang dimuat atau yang ingin Anda panggil di sini

61
00:04:44,200 --> 00:04:49,580
harus berupa array kosong dan sekarang kita dapat mengulangi objek itu untuk

62
00:04:49,610 --> 00:04:54,570
memetakan data objek, produk dalam objek ke produk dalam array.

63
00:04:54,570 --> 00:05:00,490
Ini relatif mudah dilakukan, kita dapat menambahkan loop for / in di sini dengan kunci kita di

64
00:05:00,490 --> 00:05:09,190
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

65
00:05:09,250 --> 00:05:13,240
dimuat dengan push, sehingga ini Array tumbuh dari waktu ke waktu dan

66
00:05:13,240 --> 00:05:19,420
apa yang saya tambahkan di sini pada akhirnya hanyalah produk baru, menggunakan model produk yang karena itu Anda

67
00:05:19,420 --> 00:05:20,250
perlu

68
00:05:20,260 --> 00:05:25,610
mengimpor, jadi pastikan Anda memiliki impor di sini menunjuk ke folder model Anda dan di

69
00:05:26,860 --> 00:05:28,660
sana di file produk dan

70
00:05:29,690 --> 00:05:36,910
saya buat produk baru di sini di mana ID saya adalah kunci itu karena itu adalah ID unik di sini yang

71
00:05:36,910 --> 00:05:43,820
kita miliki di objek yang ingin kita ulas, lalu hal pengguna itu, yaitu U1 masih, data dummy karena kita tidak

72
00:05:43,820 --> 00:05:51,260
memiliki data pengguna yang terlibat di sini dan kemudian kita harus melihat ke objek yang kita dapatkan kembali dari Firebase untuk mendapatkan

73
00:05:51,260 --> 00:05:52,180
judul dan seterusnya.

74
00:05:52,220 --> 00:05:58,720
Jadi di sini, judul kami untuk produk baru yang kami buat ini hanyalah resData untuk kunci yang diberikan. judul dan sama tentu saja

75
00:05:58,760 --> 00:06:00,380
di sini

76
00:06:00,380 --> 00:06:05,920
untuk imageUrl, jadi. imageUrl. Untuk uraian

77
00:06:09,440 --> 00:06:19,610
dan tentunya juga untuk harganya, seperti itu. Jadi ini menambahkan semuanya ke produk yang dimuat dan sekarang produk yang dimuat akan

78
00:06:19,610 --> 00:06:25,570
menjadi array yang diisi yang dapat saya tambahkan di sini untuk tindakan yang dikirim, ke tindakan

79
00:06:25,580 --> 00:06:27,070
produk yang ditetapkan.

80
00:06:27,230 --> 00:06:32,530
Jadi satu-satunya hal yang hilang adalah bahwa kita sekarang pergi ke peredam dan di sana, kita dapat menangani produk yang ditetapkan, mungkin

81
00:06:32,690 --> 00:06:38,080
di sini sebagai kasus pertama tetapi tentu saja posisinya tidak masalah. Tambahkan set produk di sini dan

82
00:06:38,080 --> 00:06:43,660
untuk itu, pastikan Anda mengimpornya dari file tindakan Anda dan kemudian di sana, itu adalah

83
00:06:43,670 --> 00:06:49,230
hal yang sangat sepele yang akan kami lakukan. Pada akhirnya saya hanya perlu

84
00:06:49,230 --> 00:06:59,090
mengembalikan status baru di mana produk yang tersedia setara dengan tindakan. produk, jadi ke produk yang saya dapatkan di sini di pembuat tindakan saya

85
00:06:59,330 --> 00:07:05,810
yang saya tambahkan ke tindakan saya kirim. Dan untuk produk

86
00:07:06,280 --> 00:07:14,210
pengguna, sangat mirip, ada aksi. produk, hanya disaring untuk semua produk yang memiliki ID pengguna saya, jadi seperti itu

87
00:07:15,450 --> 00:07:20,370
dan saat ini karena kode dummy saya di sini di mana saya hardcode ID pengguna saya, yang tentu

88
00:07:20,490 --> 00:07:23,670
saja berarti bahwa semua produk yang dimuat diperlakukan sebagai produk saya.

89
00:07:23,670 --> 00:07:29,790
Ini adalah sesuatu yang akan kami ubah nanti setelah kami menambahkan otentikasi. Jadi dengan itu, sekarang jika ini dimuat

90
00:07:30,080 --> 00:07:35,120
ulang, Anda lihat kita mulai dengan data dummy tetapi kemudian ini segera diganti

91
00:07:35,420 --> 00:07:39,830
dengan data yang dimuat ini. Jadi memuat data berfungsi dengan baik,

92
00:07:39,830 --> 00:07:44,370
kita dapat bekerja dengan itu seperti yang kita bisa dengan data kita sendiri di sini.

93
00:07:44,390 --> 00:07:49,340
Tentu saja kami tidak menyimpan pesanan di server dan hal-hal seperti itu tetapi kami dapat memuat data

94
00:07:49,340 --> 00:07:51,410
kami yang sebelumnya kami simpan di server.