1 00:00:02,100 --> 00:00:03,360 Jadi kami mencapai 2 00:00:03,390 --> 00:00:05,460 banyak hal, kami dapat menulis data, mengambil 3 00:00:05,460 --> 00:00:08,190 data, menggunakan token kami untuk data lingkup atau untuk 4 00:00:08,190 --> 00:00:10,950 lingkup produk dan pesanan ke pengguna kami saat ini 5 00:00:10,950 --> 00:00:12,610 login, kami dapat login dan 6 00:00:12,620 --> 00:00:14,280 seterusnya dan itu semua bagus. 7 00:00:14,280 --> 00:00:20,130 Satu hal yang tidak kami lakukan saat ini adalah kami tidak ingin 8 00:00:20,130 --> 00:00:23,970 melanjutkan sesi kami. Jika saya memuat ulang, saya selalu 9 00:00:24,030 --> 00:00:25,230 harus masuk lagi 10 00:00:25,230 --> 00:00:31,170 dan itu bukan yang saya inginkan, alangkah baiknya jika kita bisa masuk secara otomatis jika kita memiliki token 11 00:00:31,170 --> 00:00:38,310 yang valid dan untuk ini kita perlu melakukan dua hal - kita perlu menyimpan token di suatu tempat di perangkat, bukan di 12 00:00:38,310 --> 00:00:43,110 Redux karena Redux ada dalam memori dan ini akan hilang setiap kali aplikasi restart. 13 00:00:43,110 --> 00:00:45,920 Jadi itu perlu di suatu tempat di hard 14 00:00:45,930 --> 00:00:53,480 drive perangkat sehingga untuk mengatakan dan di samping itu, kita perlu memeriksa penyimpanan itu setiap kali aplikasi kita mulai dan secara otomatis mengatur 15 00:00:53,480 --> 00:00:58,080 token di Redux dan mengarahkan pengguna jika kita menemukan token yang valid di sana. 16 00:00:59,160 --> 00:01:05,590 Sekarang mari kita mulai dengan menyimpan karena itu adalah langkah pertama yang logis. Untuk menyimpan, kita perlu mengimpor 17 00:01:05,590 --> 00:01:10,090 sesuatu di sini di, bukan di pembuat tindakan 18 00:01:10,090 --> 00:01:20,810 produk tetapi sebenarnya di sini di pembuat tindakan auth, di sana Anda perlu mengimpor penyimpanan async dari React Native. 19 00:01:21,930 --> 00:01:23,280 Dengan yang 20 00:01:23,460 --> 00:01:32,130 diimpor, kita dapat menggunakannya untuk menyimpan data ke perangkat, penyimpanan async adalah React Native API yang pada akhirnya menggunakan penyimpanan nilai kunci 21 00:01:32,130 --> 00:01:38,370 pada perangkat yang tersedia baik di iOS dan Android di mana kita dapat menyimpan data yang 22 00:01:38,370 --> 00:01:45,150 tetap ada di seluruh peluncuran ulang aplikasi, sehingga dapat kita gunakan untuk menyimpan data yang tidak hilang 23 00:01:45,150 --> 00:01:47,460 saat aplikasi diluncurkan atau dimulai ulang. 24 00:01:47,460 --> 00:01:52,910 Jadi saya akan menambahkan fungsi baru, menyimpan data ke penyimpanan atau semacamnya dan di 25 00:01:53,040 --> 00:02:00,100 sana saya berharap mendapatkan token dan userId saya, dua potong data yang saya tertarik di sini dan sekarang kita 26 00:02:00,140 --> 00:02:08,970 dapat menggunakan penyimpanan async untuk kemudian atur item yang merupakan cara Anda menyimpan data dan item yang Anda atur harus berupa string tetapi pertama-tama 27 00:02:08,970 --> 00:02:11,560 Anda perlu mendefinisikan kunci dan saya 28 00:02:11,580 --> 00:02:14,840 akan menamainya data pengguna tetapi terserah Anda, Anda akan 29 00:02:14,850 --> 00:02:19,260 membutuhkan kunci itu nanti untuk mengambil data Anda dan nilai kedua 30 00:02:19,330 --> 00:02:21,170 sekarang adalah string, jadi 31 00:02:21,180 --> 00:02:26,310 string yang ingin Anda simpan di sana dan Anda harus menyimpan string pada dasarnya. 32 00:02:26,440 --> 00:02:27,340 Nah, 33 00:02:27,340 --> 00:02:33,990 itu tidak masalah, kita bisa menggunakan json. stringify untuk mengkonversi objek Javascript ke string dan objek yang ingin 34 00:02:33,990 --> 00:02:40,200 saya konversi adalah objek yang memegang token saya yang saya dapatkan sebagai argumen di sini dan itu memegang userId yang 35 00:02:40,200 --> 00:02:41,740 saya dapatkan sebagai argumen. 36 00:02:41,790 --> 00:02:48,980 Jadi pada akhirnya, kami kemudian menyimpan objek ini sebagai string ke perangkat. 37 00:02:48,990 --> 00:02:54,590 Sekarang kita hanya perlu memanggil save data to storage setiap kali kita selesai login atau mendaftar, jadi di sini mungkin setelah 38 00:02:54,590 --> 00:03:01,080 mengirimkan login, kita dapat memanggil save data to storage dan meneruskan resData. idToken 39 00:03:01,140 --> 00:03:08,100 dan resData. localId, jadi hal yang sama kita gunakan di Redux 40 00:03:08,100 --> 00:03:11,610 dan kita pasti ingin menggunakannya di sana karena Redux penting 41 00:03:11,850 --> 00:03:18,090 untuk aplikasi yang sedang berjalan tetapi saya juga menyimpannya ke perangkat ketika kita ingin memuatnya ketika aplikasi restart. 42 00:03:18,140 --> 00:03:22,810 Namun sekarang itu saja tidak akan melakukan trik dan kita tentu juga perlu melakukannya ketika 43 00:03:22,820 --> 00:03:28,340 mendaftar tetapi itu saja tidak akan melakukan trik, kita akan memerlukan satu informasi tambahan di sini sebelum kita melanjutkan. 44 00:03:28,430 --> 00:03:35,780 Apakah kamu tahu yang mana? Kita perlu tahu berapa lama token itu valid karena Anda tidak 45 00:03:36,230 --> 00:03:42,920 boleh lupa bahwa token itu akhirnya akan berakhir, itulah sebabnya untuk masuk dan mendaftar, Anda mendapatkan bahwa kadaluwarsa itu dalam 46 00:03:43,310 --> 00:03:50,510 respons yang memberi tahu Anda dalam hitungan detik berapa lama waktu yang diperlukan hingga token Anda tidak valid dan Firebase tidak akan 47 00:03:50,510 --> 00:03:51,510 menerimanya lagi. 48 00:03:51,650 --> 00:03:57,590 Kita perlu menyimpan informasi itu juga karena jika kita kembali nanti, jika kita me-restart aplikasi setelah 49 00:03:57,590 --> 00:04:01,390 tiga jam, token kita mungkin tidak valid, jadi kita perlu 50 00:04:01,460 --> 00:04:04,370 tahu kapan token akan batal sehingga kita 51 00:04:04,370 --> 00:04:09,800 ketika kita memeriksa itu, ketika aplikasi restart, ketika kita memeriksa apakah kita memiliki token, kita 52 00:04:09,800 --> 00:04:16,460 tahu apakah token yang kita temukan sebenarnya masih relevan atau apakah itu sudah tidak valid dan kita perlu token 53 00:04:16,460 --> 00:04:20,120 baru dalam hal ini kita tidak boleh login otomatis pengguna. 54 00:04:20,480 --> 00:04:23,360 Jadi saya ingin menyimpan tanggal kedaluwarsa 55 00:04:23,360 --> 00:04:31,180 dan saya akan membuat tanggal kedaluwarsa di sini sebagai konstanta, objek tanggal baru yang pada akhirnya harus 56 00:04:31,180 --> 00:04:35,020 mengambil tanggal saat ini dan menambahkan waktu kedaluwarsa. 57 00:04:37,810 --> 00:04:45,790 Sekarang tanggal baru mengambil objek tanggal tetapi dengan mendapatkan waktu, kita mendapatkan cap waktu saat ini dalam milidetik sejak awal 58 00:04:45,790 --> 00:04:49,590 waktu sehingga bisa dikatakan, yang ada di sini tahun 59 00:04:49,780 --> 00:04:51,200 1970 di Javascript. 60 00:04:51,570 --> 00:04:57,630 Jadi itu jumlah dalam milidetik dan untuk itu, kita bisa menambahkan resData. kadaluarsa dalam. 61 00:04:58,210 --> 00:05:01,720 Ini adalah jumlah detik, jadi kita perlu mengonversinya 62 00:05:01,720 --> 00:05:06,910 menjadi milidetik dan itu juga sebuah string, jadi kita perlu mengonversinya menjadi angka. 63 00:05:06,910 --> 00:05:16,490 Jadi di sini saya akan menambahkan nilai tambah di sini atau cukup parseInt sebagai alternatif untuk mengubah ini menjadi bilangan bulat dan kemudian saya 64 00:05:16,490 --> 00:05:23,550 kalikan ini dengan 1000 untuk mengubahnya dari detik ke milidetik karena mendapatkan waktu juga memberi kita milidetik. 65 00:05:23,570 --> 00:05:29,690 Sekarang ini memberi saya cap waktu baru di masa depan yang merupakan waktu saat 66 00:05:29,690 --> 00:05:35,990 ini ditambah waktu kedaluwarsa dan saya membungkusnya dengan objek tanggal lain untuk mengubahnya kembali dari 67 00:05:36,110 --> 00:05:44,520 angka milidetik besar menjadi objek tanggal cap waktu konkret. Tanggal kedaluwarsa ini sekarang adalah apa yang juga harus kami lewati untuk menyimpan 68 00:05:44,530 --> 00:05:48,880 data ke penyimpanan, jadi di sini saya berharap untuk mendapatkan tanggal kedaluwarsa juga 69 00:05:48,880 --> 00:05:51,070 dan kami harus menyertakannya di sini. 70 00:05:51,400 --> 00:05:55,810 Jadi di sini saya dapat menyebutkan tanggal kedaluwarsa ini mungkin 71 00:05:55,840 --> 00:06:05,830 untuk mencampuradukkan, ini adalah tanggal kedaluwarsa saya dan di sana saya ingin memanggil metode toISOString kecil yang menyenangkan ini yang dapat kita 72 00:06:05,830 --> 00:06:11,500 panggil pada objek tanggal karena ini akan mengubahnya menjadi string dalam format 73 00:06:11,500 --> 00:06:14,240 standar yang Saya ingin menyimpan. 74 00:06:14,400 --> 00:06:18,150 Sekarang ini yang ingin saya lakukan untuk mendaftar juga, jadi ini 75 00:06:18,150 --> 00:06:20,190 bisa disalin di sana dan ini 76 00:06:20,520 --> 00:06:22,120 juga yang ingin 77 00:06:22,170 --> 00:06:26,220 saya lakukan di sana, buat tanggal kedaluwarsa dan simpan ke penyimpanan. 78 00:06:26,220 --> 00:06:29,220 Sekarang kami menyimpannya ke penyimpanan yang bagus tapi sekarang 79 00:06:29,670 --> 00:06:35,670 kami juga perlu memeriksa ini saat kami masuk. Cara yang baik untuk melakukannya adalah dengan membuat layar baru 80 00:06:35,670 --> 00:06:41,040 dan saya akan benar-benar membuat ini di luar folder saya yang ada di folder layar tetapi tidak di 81 00:06:41,040 --> 00:06:47,570 toko atau di pengguna dan saya akan memberi nama layar startup ini dan Anda dapat menamainya layar Anda dan Anda dapat menamainya ingin. 82 00:06:47,610 --> 00:06:54,240 Idenya adalah bahwa saya menunjukkan layar ini ketika aplikasi saya boot dan saya mencari tahu apakah pengguna diautentikasi atau tidak 83 00:06:54,240 --> 00:06:55,380 dan ini akan 84 00:06:55,380 --> 00:06:56,770 sangat cepat, kemungkinan kita 85 00:06:56,790 --> 00:07:02,350 bahkan tidak akan melihat layar itu ketika aplikasi dimulai. Sekarang di sini, kita membuat 86 00:07:02,370 --> 00:07:06,670 komponen Bereaksi reguler dengan mengimpor reaksi dari reaksi dan di 87 00:07:06,910 --> 00:07:11,120 sana, saya mengimpor barang-barang dari React Native, tepatnya saya memerlukan 88 00:07:11,130 --> 00:07:17,310 tampilan, indikator aktivitas untuk menampilkan pemintal pemuatan saat aplikasi booting dan juga stylesheet dan juga 89 00:07:17,310 --> 00:07:23,280 penyimpanan async karena di sini saya juga ingin mengakses penyimpanan async untuk mengetahui apakah 90 00:07:23,280 --> 00:07:26,450 kami memiliki token yang valid atau tidak. 91 00:07:26,460 --> 00:07:33,660 Jadi di sini, saya kemudian memiliki komponen layar startup saya yang merupakan komponen Bereaksi reguler 92 00:07:33,780 --> 00:07:44,570 dan objek stylesheet di sini dengan Stylesheet. buat dan pada akhirnya, kita bisa mengekspor layar startup ini seperti ini. Sekarang di komponen, saya hanya akan 93 00:07:44,580 --> 00:07:56,450 menyajikan indikator aktivitas di sini dengan ukuran besar dan warna Warna. utama dan untuk itu Anda perlu mengimpor warna yang 94 00:07:56,450 --> 00:08:05,100 konstan, tentu saja dan juga menetapkan sedikit gaya di sini untuk tampilan dan 95 00:08:05,100 --> 00:08:13,520 saya hanya akan mengambil gaya. layar di sini yang sekarang kita dapat menambahkan 96 00:08:13,520 --> 00:08:16,530 ke stylesheet dan itu harus 97 00:08:16,690 --> 00:08:23,690 sangat sederhana, fleksibel, membenarkan pusat konten dan menyelaraskan pusat item untuk beberapa konten 98 00:08:23,720 --> 00:08:29,870 yang berpusat secara vertikal dan horizontal. Sekarang tentu saja hal-hal penting yang sebenarnya terjadi di 99 00:08:29,870 --> 00:08:33,520 atas kode jsx, di sinilah kita sekarang perlu memeriksa penyimpanan 100 00:08:33,620 --> 00:08:39,820 async untuk token yang valid dan saya bisa melakukan ini dengan bantuan efek penggunaan yang memungkinkan saya menjalankan 101 00:08:39,820 --> 00:08:42,230 beberapa logika di sini ketika komponen 102 00:08:42,250 --> 00:08:51,190 ini terpasang dan memang di sini, saya tidak akan memerlukan dependensi karena di sini di dalam efek penggunaan, saya sekarang ingin menambahkan fungsi baru yang saya 103 00:08:51,190 --> 00:08:58,060 akan beri nama coba daftar atau coba masuk lebih pas dan saya menggunakan fungsi terpisah karena di sini saya ingin 104 00:08:58,090 --> 00:09:04,390 menggunakan async tunggu yang bisa saya lakukan dengan membuat fungsi dalam yang sekarang saya bisa panggil di sini, 105 00:09:04,390 --> 00:09:05,310 coba masuk 106 00:09:05,410 --> 00:09:10,840 karena lagi, async di sini di fungsi ini yang Anda lewati untuk menggunakan efek tidak akan 107 00:09:10,840 --> 00:09:14,020 benar-benar diizinkan dan di sini di coba masuk, tujuannya 108 00:09:14,170 --> 00:09:21,460 sekarang adalah untuk memeriksa penyimpanan async untuk token yang valid. Jadi saya mendapatkan data pengguna saya di sini dengan mengakses 109 00:09:21,520 --> 00:09:23,030 AsyncStorage. getItem 110 00:09:23,240 --> 00:09:28,750 dan kemudian gunakan kunci yang Anda gunakan untuk menyimpan. 111 00:09:28,960 --> 00:09:35,950 Jadi dalam kasus saya itu adalah data pengguna tetapi Anda harus menggunakan kunci apa pun yang Anda gunakan dalam auth. File js di folder tindakan 112 00:09:35,950 --> 00:09:43,160 untuk menyimpan data Anda dengan penyimpanan async. Jadi saya mengambil ini dan sekarang hal penting yang 113 00:09:43,160 --> 00:09:49,970 perlu diketahui di sini adalah mendapatkan item, seperti semua metode penyimpanan async, sebenarnya adalah asinkron yang artinya seperti 114 00:09:50,030 --> 00:09:55,520 namanya, saya kira, yang berarti Anda mendapat janji di sini, jadi kita bisa menunggu 115 00:09:55,520 --> 00:09:58,560 dan ini akan mengembalikan data pengguna kami. 116 00:09:58,570 --> 00:10:05,200 Sekarang ini adalah data sebagai string, untuk mengubahnya menjadi sepotong data yang dapat 117 00:10:05,230 --> 00:10:14,410 kita kerjakan, saya akan mengubah data saya dengan JSON. parsing data pengguna dan ini mem-parsing string dalam 118 00:10:14,410 --> 00:10:24,220 format JSON dan mengubahnya menjadi objek atau array Javascript. Sekarang bahkan sebelum mencobanya, saya akan memeriksa apakah data pengguna tidak benar, jadi 119 00:10:24,220 --> 00:10:24,850 jika 120 00:10:24,850 --> 00:10:31,030 tidak disetel, jika kami tidak dapat menemukan data untuk kunci itu karena saya tahu kami pasti 121 00:10:31,030 --> 00:10:31,720 tidak masuk. 122 00:10:31,780 --> 00:10:36,370 Jadi di sini saya ingin kembali dan tidak melanjutkan dan melakukan 123 00:10:36,370 --> 00:10:43,810 satu hal penting, saya akan menggunakan navigasi alat peraga dan menavigasi ke layar auth karena layar startup ini harus 124 00:10:43,810 --> 00:10:44,770 ditambahkan ke 125 00:10:45,190 --> 00:10:52,960 navigator, jadi di sini kita dapat mengimpornya, mengimpor layar startup dari folder layar tentu saja, layar startup dan kami 126 00:10:54,070 --> 00:10:57,590 menambahkannya ke utama di navigator di sini, jadi 127 00:10:57,760 --> 00:11:07,190 di mana kami juga memiliki auth dan toko dan ada di bagian paling atas, saya menambahkan startup dan arahkan ke layar startup saya. 128 00:11:07,350 --> 00:11:11,490 Ini berarti bahwa ini adalah hal pertama yang saya muat di sini. 129 00:11:11,490 --> 00:11:17,010 Sekarang di layar startup ini, oleh karena itu saya pergi ke layar auth jika kita tidak dapat 130 00:11:17,010 --> 00:11:22,230 menemukan token, jadi berkat navigator sakelar, saya meninggalkan layar itu dan pergi ke layar auth atau 131 00:11:22,230 --> 00:11:28,810 ke tumpukan auth karena saya tidak menemukan sebuah token. Jadi jika kita berhasil melewati ini jika memeriksa, kita setidaknya memiliki beberapa data tetapi token 132 00:11:28,810 --> 00:11:29,950 masih mungkin tidak valid. 133 00:11:30,370 --> 00:11:39,980 Jadi kita tentu saja akan memiliki token, userId dan tanggal kedaluwarsa yang dapat kita ekstrak dari data yang diubah setelah baris 134 00:11:40,520 --> 00:11:42,770 ini, di sini dengan 135 00:11:43,600 --> 00:11:46,860 sintaksis penghancuran objek ini dan ini adalah 136 00:11:46,870 --> 00:11:54,580 tiga potong data dengan tiga nama yang persis sama seperti yang saya simpan di sini di 137 00:11:54,580 --> 00:11:56,400 auth. file js. Jadi 138 00:11:56,410 --> 00:12:00,700 di sini kita memiliki objek dengan token, userId dan 139 00:12:00,700 --> 00:12:03,000 bidang tanggal kedaluwarsa, itulah yang 140 00:12:03,010 --> 00:12:08,580 kami simpan di penyimpanan async, itulah yang dapat saya ambil di sini. 141 00:12:08,610 --> 00:12:11,360 Sekarang kita perlu memeriksa apakah token masih valid 142 00:12:11,460 --> 00:12:20,670 dan untuk ini, saya dapat membuat ulang tanggal kedaluwarsa saya dengan menggunakan tanggal baru dan melewati tanggal kedaluwarsa yang sebenarnya merupakan string dalam format ISO untuk 143 00:12:20,670 --> 00:12:23,220 itu dan sekarang kita dapat menambahkan 144 00:12:23,220 --> 00:12:27,270 tanda centang dan melihat apakah tanggal kedaluwarsa, jadi tanggal saat token 145 00:12:27,270 --> 00:12:33,660 menjadi tidak valid, jika token lebih kecil atau sama dengan tanggal baru, yang merupakan cap waktu saat ini yang 146 00:12:33,660 --> 00:12:39,570 berarti tanggal kedaluwarsa di masa lalu dan jika itu di masa lalu, maka token kami tidak valid. 147 00:12:40,320 --> 00:12:45,300 Itu juga tidak valid jika kita tidak dapat menemukan token atau juga jika kita 148 00:12:45,360 --> 00:12:51,900 tidak dapat menemukan userId, jika salah satu dari ketiga kondisi ini benar, kita memiliki token yang tidak valid 149 00:12:51,900 --> 00:12:54,550 atau userId yang tidak valid atau semacamnya. 150 00:12:54,570 --> 00:12:58,700 Jadi dalam hal ini, saya juga ingin kembali dan 151 00:12:59,340 --> 00:13:05,640 tentu saja menavigasi ke layar auth. Jika kami berhasil melewati ini jika centang, 152 00:13:05,700 --> 00:13:10,110 kami memiliki token, kami memiliki userId dan token masih valid. 153 00:13:10,110 --> 00:13:17,720 Jadi jika Anda membuatnya di sini, saya akan memanggil alat peraga. navigasi. menavigasi toko untuk pergi ke layar toko 154 00:13:17,720 --> 00:13:21,020 dan juga penting, saya perlu login pengguna dan untuk itu, kita 155 00:13:21,030 --> 00:13:24,230 perlu tindakan baru karena saya tidak ingin mengirim permintaan sekarang, 156 00:13:24,240 --> 00:13:29,900 saya hanya ingin mengubah beberapa data di Redux. Jadi saya akan menambahkan pembuat tindakan 157 00:13:31,550 --> 00:13:44,200 baru di sini, ekspor autentikasi const yang mungkin mengambil userId dan token saya dan yang kemudian digunakan untuk mengubah data saya di Redux dan untuk itu, saya sekarang akan 158 00:13:44,200 --> 00:13:45,250 menambahkan 159 00:13:45,250 --> 00:13:54,390 pengidentifikasi tindakan baru, otentikasi dengan string dari otentikasi di sini dan gunakan ini di sini sebagai jenis otentikasi, lampirkan userId saya 160 00:13:55,290 --> 00:14:02,190 yang merupakan userId saya di sini dan token saya yang merupakan token yang saya dapatkan sebagai 161 00:14:02,190 --> 00:14:08,360 argumen dan sekarang tindakan otentikasi ini adalah apa yang ingin saya kirimkan di sini 162 00:14:08,370 --> 00:14:09,600 di layar startup. 163 00:14:10,730 --> 00:14:15,950 Tetapi sebelum saya melakukannya, kita juga dapat kembali ke pembuat tindakan dan pada akhir 164 00:14:15,950 --> 00:14:22,520 mendaftar, alih-alih mengirimkan tindakan pendaftaran kebiasaan saya sendiri di sini, kami juga dapat mengirim otentikasi dan menjalankan 165 00:14:22,550 --> 00:14:23,390 ini 166 00:14:23,510 --> 00:14:33,930 di sini, pembuat tindakan ini dan cukup meneruskan resData. localId sebagai userId dan resData. idToken sebagai token 167 00:14:33,950 --> 00:14:40,040 dan lakukan hal yang sama di akhir login. 168 00:14:40,040 --> 00:14:45,400 Jadi sekarang saya memang menggabungkan kedua aliran ini karena pada akhirnya hal yang sama terjadi, 169 00:14:45,560 --> 00:14:51,350 jadi sekarang di peredam, dalam peredam auth, tentu saja alih-alih memeriksa login dan mendaftar, kita dapat 170 00:14:51,350 --> 00:14:57,780 mengimpor autentikasi dan menggunakan pengenal ini di sini, singkirkan pendaftaran dan saya hanya akan berkomentar untuk tetap tinggal di 171 00:14:57,800 --> 00:15:00,830 sini untuk referensi karena hal yang sama terjadi. 172 00:15:00,860 --> 00:15:05,980 Jadi sekarang menggabungkannya masuk akal karena kita juga membutuhkannya untuk login otomatis ini. 173 00:15:06,020 --> 00:15:11,090 Jadi di sini saya kemudian juga mengirimkannya di sini untuk login manual dan mendaftar manual 174 00:15:11,090 --> 00:15:17,150 dan tentu saja sekarang dengan itu, jika Anda mau, Anda juga dapat menyingkirkan login dan mendaftar di sini, 175 00:15:17,150 --> 00:15:20,200 dari dua pengidentifikasi ini karena kami tidak gunakan lagi. 176 00:15:20,390 --> 00:15:24,380 Tetapi dengan itu, kembali ke layar mulai, di sini 177 00:15:24,600 --> 00:15:34,480 kita sekarang juga dapat mengirimkan ini dan untuk itu Anda hanya perlu mengimpor menggunakan pengiriman dari React Redux dan mengimpor tindakan, jadi impor semuanya sebagai tindakan 178 00:15:34,490 --> 00:15:41,650 auth mungkin dari folder toko, dari folder tindakan dan dari file auth di sana dan kemudian di sini di 179 00:15:41,650 --> 00:15:43,190 awal, dapatkan akses 180 00:15:43,270 --> 00:15:49,590 ke fungsi pengiriman dengan memanggil use dispatch dan dengan itu tersedia, di sini kita dapat menambahkan 181 00:15:49,800 --> 00:15:55,230 pengiriman sebagai ketergantungan tetapi ini tidak akan pernah berubah, sehingga efeknya tidak akan pernah 182 00:15:55,240 --> 00:16:01,330 dijalankan lagi dan di sini setelah menavigasi ke toko, saya sekarang juga ingin mengirim tindakan autentikasi 183 00:16:01,450 --> 00:16:10,510 dan meneruskan userId yang diekstraksi, jadi bidang ini di sini dan token yang diekstraksi, jadi bidang ini yang saya dapatkan dari penyimpanan async 184 00:16:10,510 --> 00:16:19,150 saya dan yang sekarang seharusnya secara otomatis memasukkan saya ke . Itu banyak pekerjaan, mari kita lihat 185 00:16:19,150 --> 00:16:24,310 apakah itu berhasil. Jika saya memuat ulang ini, saya berakhir di sini di layar masuk 186 00:16:24,340 --> 00:16:27,010 karena saat ini saya tidak memiliki token yang valid disimpan di penyimpanan async. 187 00:16:27,880 --> 00:16:37,510 Jadi sekarang jika saya mencoba masuk ke sini, saya diteruskan, jika saya sekarang memuat ulang, saya kembali lagi ke sini dan 188 00:16:37,510 --> 00:16:43,560 itu hebat karena sekarang ini berarti ini sepertinya berfungsi dan token itu disimpan. 189 00:16:43,730 --> 00:16:48,230 Sekarang tentu saja akan lebih baik jika kita juga bisa keluar karena saat ini, tidak ada cara 190 00:16:48,230 --> 00:16:49,070 untuk melakukan itu.