1
00:00:02,360 --> 00:00:04,430
Bagaimana kita bisa menggunakan toko kita?

2
00:00:04,430 --> 00:00:11,240
Perlu diingat bahwa pada akhirnya di sini, saya mengelola makanan saya, bukan kategori saya karena kami tidak memiliki rencana tindakan yang akan

3
00:00:11,240 --> 00:00:13,490
mengubah apa pun di sana, tetapi saya

4
00:00:13,670 --> 00:00:15,530
mengelola makanan saya di sini.

5
00:00:15,650 --> 00:00:22,990
Jadi satu tugas besar adalah pergi ke mana-mana di aplikasi kami di mana kami mengimpor makanan dari data tiruan dan menyingkirkan impor

6
00:00:23,110 --> 00:00:26,970
itu dan sebaliknya, mengeluarkan data dari toko kami karena perbedaannya adalah

7
00:00:26,980 --> 00:00:32,650
bahwa nantinya kita dapat menambahkan logika untuk mengubah data di toko kami sedangkan data dummy kami

8
00:00:32,650 --> 00:00:34,170
tidak akan pernah berubah.

9
00:00:34,180 --> 00:00:38,980
Jadi kita harus mengimpor data dari toko kami, sehingga kami dapat menambahkan logika untuk

10
00:00:39,280 --> 00:00:42,970
memanipulasi data itu, misalnya untuk membatasi makanan yang kami tampilkan.

11
00:00:42,980 --> 00:00:47,510
Jadi, di mana kita membutuhkan makanan itu? Pada layar kategori,

12
00:00:47,510 --> 00:00:52,130
kami tidak mengimpor makanan. Kami mendapat beberapa impor lain yang sebenarnya bisa kami hilangkan tetapi

13
00:00:52,130 --> 00:00:52,490
itu

14
00:00:52,550 --> 00:00:53,840
hanya catatan, kami tidak mengimpor makanan.

15
00:00:53,870 --> 00:00:58,340
Kategori dapat tetap di sana karena lagi, kita tidak akan memiliki

16
00:00:58,490 --> 00:01:05,690
logika yang mengubah itu, jadi kita bisa melanjutkan. Layar kategori makanan adalah cerita yang berbeda, di sana kita mengimpor makanan dan

17
00:01:05,690 --> 00:01:09,530
sekarang tujuannya adalah untuk menyingkirkan impor itu dan mengeluarkan makanan dari toko Redux dan

18
00:01:09,530 --> 00:01:16,640
pertanyaannya tentu saja, bagaimana kita melakukan ini? Sekali lagi, paket React Redux membantu kami dengan itu. Dari paket React

19
00:01:16,730 --> 00:01:25,010
Redux itu, kita bisa mengimpor sesuatu, kita bisa mengimpor kait, gunakan kait pemilih.

20
00:01:25,020 --> 00:01:32,210
Ini memungkinkan kita untuk memilih sepotong negara kita, negara kita yang dikelola secara global dan menggunakannya dalam komponen ini.

21
00:01:32,220 --> 00:01:36,660
Sekarang saya menggunakan kait di sini karena itu memungkinkan kami untuk menggunakan ini dalam komponen

22
00:01:36,660 --> 00:01:42,480
fungsional, Anda juga mungkin menyadari pendekatan lain di mana Anda benar-benar mengimpor fungsi koneksi dan membungkus ekspor Anda dengan itu

23
00:01:42,480 --> 00:01:47,220
dan menggunakan negara peta untuk alat peraga, pengiriman peta untuk alat peraga, itu adalah sesuatu yang

24
00:01:47,220 --> 00:01:49,010
dapat Anda gunakan juga, itu

25
00:01:49,020 --> 00:01:51,560
benar-benar akan bekerja tetapi ini sedikit lebih ramping, jadi

26
00:01:51,580 --> 00:01:56,140
saya akan menggunakan pemilih penggunaan di sini. Dengan itu ditambahkan, sekarang ketika

27
00:01:56,260 --> 00:01:59,510
kita menggunakan makanan kita, kita tidak menggunakannya seperti

28
00:01:59,710 --> 00:02:07,270
ini, sebaliknya sekarang kita bisa mendapatkannya dengan bantuan pemilih penggunaan. Jadi untuk mendapatkan makanan tampilan kami, apa yang akan saya

29
00:02:07,270 --> 00:02:15,400
lakukan di sini adalah saya akan membuat makanan konstan baru yang tersedia mungkin, namanya terserah Anda dan menggunakan pemilih di sini seperti ini karena

30
00:02:15,400 --> 00:02:19,920
ini akan mengambil saya data dari negara dan mengembalikan itu, jadi itulah yang

31
00:02:19,930 --> 00:02:25,450
kemudian akan saya simpan di sini dalam konstanta ini, nilai yang dikembalikan dan selector yang digunakan

32
00:02:26,110 --> 00:02:29,920
mengambil fungsi, fungsi yang akan dieksekusi untuk kita oleh React Redux.

33
00:02:29,920 --> 00:02:36,430
Fungsi yang menjadikan negara sebagai argumen secara otomatis, Bereaksi Redux yang mengeksekusi fungsi untuk kami akan memberikan keadaan

34
00:02:36,430 --> 00:02:44,140
saat ini, keadaan Redux saat ini ke fungsi ini dan kemudian dapat mengembalikan data apa pun yang kami inginkan dari keadaan

35
00:02:44,200 --> 00:02:48,810
itu, dari global itu toko, dari negara global dan saya menggunakan istilah ini

36
00:02:48,850 --> 00:02:50,640
secara bergantian di sini.

37
00:02:52,910 --> 00:02:56,380
Jadi bagaimana kita dapat mengambil data dari keadaan itu di sini di

38
00:02:56,420 --> 00:03:01,370
badan fungsi lalu dan saya menggunakan notasi panah pintas di sini di mana di sisi kanan panah, ini

39
00:03:01,370 --> 00:03:06,860
secara otomatis dikembalikan jika tidak dibungkus dengan kurung kurawal. Nah untuk mendapatkan akses ke sesuatu dari keadaan,

40
00:03:06,860 --> 00:03:12,560
kita harus kembali ke tempat di mana kita membuat toko, di sana saya melewati peredam root yang dibuat

41
00:03:12,560 --> 00:03:14,120
dengan menggabungkan semua reducrs.

42
00:03:14,150 --> 00:03:17,250
Sekali lagi kami hanya punya satu tapi saya jelaskan mengapa saya melakukan ini.

43
00:03:17,300 --> 00:03:20,980
Sekarang kami memiliki kunci ini, makanan yang sepenuhnya terserah Anda, Anda dapat menamainya

44
00:03:20,990 --> 00:03:22,640
apa pun yang Anda inginkan.

45
00:03:22,640 --> 00:03:29,030
Ini memberikan irisan ini dari negara kita yang dikelola oleh reducer ini sebagai pengidentifikasi

46
00:03:29,030 --> 00:03:32,950
dan kita sekarang dapat menggunakan pengenal ini untuk

47
00:03:33,020 --> 00:03:37,820
mendapatkan bagian dari negara kita yang menjadi tanggung jawab reducer ini.

48
00:03:37,820 --> 00:03:45,070
Jadi pada akhirnya, keadaan yang akan terlihat seperti ini, seperti keadaan awal ini. Jadi dalam kategori makanan layar, di

49
00:03:45,070 --> 00:03:51,210
sini saya mengakses negara. makanan atau apa pun yang Anda pilih sebagai pengidentifikasi dalam

50
00:03:51,310 --> 00:03:58,490
kombinasi reduksi dan kemudian di sini, saya akan mengakses makanan yang difilter. Bukan makanan yang juga akan saya makan di sana,

51
00:03:58,540 --> 00:04:03,380
kami juga punya makanan di sini, tetapi saya ingin menghormati setiap filter yang ditetapkan.

52
00:04:03,450 --> 00:04:06,690
Saat ini, kami tidak memiliki logika untuk mengaturnya tetapi

53
00:04:06,760 --> 00:04:12,970
dengan itu kami akan berubah di masa depan, jadi di sini saya ingin mendapatkan makanan yang difilter sehingga

54
00:04:12,970 --> 00:04:17,930
saya selalu mendapatkan makanan yang benar-benar harus saya dapat tampilkan, makanan yang menghormati filter

55
00:04:18,130 --> 00:04:25,420
disiapkan oleh pengguna dan sekarang ini makanan yang tersedia yang ingin saya filter lebih lagi di sini untuk menemukan makanan untuk

56
00:04:25,420 --> 00:04:33,880
ID kategori yang saya pilih atau makanan untuk kategori yang saya pilih. Dengan itu, tidak ada lagi huruf besar makanan dalam

57
00:04:33,890 --> 00:04:39,500
file ini, itu semua hanya huruf kecil di sini dan kami berhasil menyingkirkan

58
00:04:39,500 --> 00:04:45,890
impor itu, sekarang mari kita lanjutkan. Di layar favorit, kami juga mengimpor makanan

59
00:04:45,890 --> 00:04:46,650
dan

60
00:04:46,670 --> 00:04:54,770
seperti sebelumnya, kami harus menyingkirkannya, jadi mari kita lakukan ini. Sebaliknya, juga seperti sebelumnya, saya akan menggunakan pemilih penggunaan dari React Redux

61
00:04:54,770 --> 00:05:02,720
untuk mendapatkan makanan saya dari toko dan oleh karena itu di sini di mana saya menggunakan makanan, saya benar-benar akan mendapatkan makanan yang

62
00:05:02,720 --> 00:05:04,260
tersedia dengan pemilih penggunaan.

63
00:05:04,310 --> 00:05:10,370
Sekali lagi ini memberi saya keadaan dan saya bisa mengakses keadaan. makanan. makanan yang difilter tetapi sekarang

64
00:05:10,370 --> 00:05:11,240
benar-benar di

65
00:05:11,240 --> 00:05:16,250
sini untuk favorit, saya tidak ingin menghormati filter yang ditetapkan karena menurut saya masuk

66
00:05:16,250 --> 00:05:21,000
akal bahwa ketika kita ingin melihat favorit kita, kita selalu melihat semua favorit.

67
00:05:21,050 --> 00:05:25,930
Anda tentu saja dapat memiliki logika yang berbeda dan pergi untuk makanan yang difilter tetapi saya hanya akan menggunakan makanan

68
00:05:26,090 --> 00:05:28,490
di sini, jadi. makanan. makanan

69
00:05:28,520 --> 00:05:36,950
mungkin terlihat aneh, ini memilih irisan negara kita dan kemudian dalam irisan ini, makanan ini di sini mengakses properti makanan ini di

70
00:05:36,950 --> 00:05:37,940
irisan negara kita,

71
00:05:40,820 --> 00:05:46,180
tetapi tentu saja jika Anda melihat peredam Anda, ini hanya sebagian masuk akal

72
00:05:46,180 --> 00:05:51,050
karena kami punya properti makanan favorit di sini dan memang kami punya.

73
00:05:51,330 --> 00:05:58,260
Jadi sebenarnya, kita tidak perlu lagi memfilter favorit kita seperti ini dan ini hanya filter tiruan, itu

74
00:05:58,260 --> 00:06:04,710
selalu mengambil makanan dengan m1 dan m2 sebagai ID, alih-alih untuk makanan favorit kita, kita bisa

75
00:06:04,760 --> 00:06:10,310
mendapatkannya dengan mengakses di sini di makanan kami mengiris makanan favorit, jadi properti

76
00:06:10,310 --> 00:06:16,880
ini karena kami nantinya akan mengelola makanan favorit dalam array terpisah di toko kami, jadi itu

77
00:06:16,880 --> 00:06:18,280
bahkan lebih mudah

78
00:06:18,290 --> 00:06:23,290
di sini, kode yang sangat singkat. Jadi dengan itu, kami menyingkirkan impor makanan di sini

79
00:06:23,300 --> 00:06:25,460
juga, mari beralih ke layar filter.

80
00:06:25,460 --> 00:06:27,080
Tidak ada makanan impor di

81
00:06:27,170 --> 00:06:29,840
sini, layar detail makanan di sisi lain memiliki satu.

82
00:06:29,840 --> 00:06:31,280
Jadi di sini saya

83
00:06:31,310 --> 00:06:33,220
ingin menyingkirkannya dan sekarang di sini

84
00:06:33,290 --> 00:06:39,800
kita akan memerlukan properti makanan lain yang saya perlihatkan sedetik yang lalu karena sekali lagi di sini, kita dapat menggunakan

85
00:06:40,610 --> 00:06:51,720
pemilih penggunaan dari React Redux untuk memilih makanan kita karena di sini, kita sekarang memiliki komponen di sini di mana kita menggunakan makanan kita dan di sana, saya ingin memiliki array dengan semua makanan

86
00:06:51,810 --> 00:06:59,280
karena saya mencoba untuk memuat satu kali makan dengan ID dan karena itu basis saya, array saya di mana saya mencari ID itu

87
00:06:59,370 --> 00:07:04,440
tentu saja harus menjadi array dengan semua makanan dan tidak difilter karena saya tidak peduli dengan

88
00:07:04,440 --> 00:07:09,900
filter yang ditetapkan, di sini saya mencari makanan tertentu dengan ID tertentu dan saya ingin mendapatkan daftar

89
00:07:09,900 --> 00:07:16,140
lengkap makanan dan oleh karena itu di mana kita akan membutuhkan ini tanpa filter daftar makanan yang kami kelola

90
00:07:16,140 --> 00:07:17,180
di sini.

91
00:07:20,140 --> 00:07:27,880
Jadi karena itu di sini, kita sekarang bisa mendapatkan makanan yang tersedia dengan pemilih penggunaan dan di

92
00:07:27,880 --> 00:07:34,360
sana lagi, kita menggunakan makanan negara. makanan sekarang nyata dan sekarang kita bisa menggunakan makanan

93
00:07:34,420 --> 00:07:41,070
yang tersedia di sini untuk menemukan makanan dengan ID itu. Dengan itu, kita menyingkirkan impor ini di sini juga, kita juga dapat menghapus

94
00:07:41,070 --> 00:07:44,090
impor tombol sekarang saya melihatnya tetapi kita benar-benar akan memiliki masalah.

95
00:07:44,430 --> 00:07:51,780
Anda mungkin memperhatikan bahwa di tajuk, sebenarnya saya juga mencoba mencari makanan dari array makanan dan

96
00:07:51,780 --> 00:07:53,770
kami menghapus impor itu.

97
00:07:53,790 --> 00:07:59,010
Sekarang masalahnya juga ada di sini di opsi navigasi, kita tidak dapat menggunakan kait pemilih penggunaan karena

98
00:07:59,010 --> 00:08:04,170
Anda hanya dapat menggunakan kait di dalam kait lain atau di dalam komponen fungsional dan ini bukan

99
00:08:04,170 --> 00:08:08,340
itu, itu adalah fungsi normal, bukan fungsional komponen dan juga bukan kail.

100
00:08:08,340 --> 00:08:11,870
Jadi kita tidak bisa menggunakan pemilih penggunaan di sini sehingga tidak akan berfungsi.

101
00:08:11,900 --> 00:08:17,400
Sekarang tentu saja kita dapat membawa kembali impor makanan tetapi itu akan menjadi agak murah karena dalam aplikasi nyata, Anda

102
00:08:17,400 --> 00:08:22,710
kadang-kadang akan memiliki situasi di mana Anda memerlukan data dari toko Redux Anda dalam data navigasi Anda dan oleh

103
00:08:22,710 --> 00:08:23,160
karena

104
00:08:23,190 --> 00:08:28,470
itu dalam kuliah berikutnya, kami akan atasi ini dan pastikan bahwa kita juga bisa mendapatkan akses ke sini.