Untuk fitur add to cart, kita perlu mengerjakan dua hal - satu
tentu saja kita dapat memiliki layar keranjang, bahwa kita memiliki
ikon di sini di header kita yang membawa kita ke layar keranjang di mana kita dapat melihat seperti jumlah total dan item
keranjang dan di mana kita memiliki tombol pesanan sekarang, tetapi
saya akan mengatakan itu adalah langkah kedua karena langkah pertama yang lebih penting adalah kita menambahkan logika
untuk mengelola item keranjang dan itu melibatkan Redux. Untuk ini, saya akan menambahkan peredam baru,
peredam kedua yang akan saya beri nama troli, gerobak. js dan juga file tindakan dan ini sekarang sebenarnya
file tindakan yang akan kita isi.
Kami akan melakukannya dengan file produk nanti juga
setelah kami masuk ke menambahkan produk dan sebagainya, tetapi untuk sekarang, mari kita mulai dengan fitur keranjang. Jadi di sini, di
gerobak. File js di folder
reduksi, saya akan mengatur keadaan awal saya untuk irisan gerobak itu dan lagi, itu semua reduksi
terpisah dan status yang mereka kelola untuk membuat total toko Redux karena pada akhirnya, itulah
yang kemudian Anda gabungkan di sini dengan gabungan mereduksi menjadi satu peredam akar dan satu kondisi besar pada akhirnya.
Kami hanya memiliki masing-masing sub-negara bagian untuk mengelola data lebih mudah.
Jadi di sini, di peredam kereta, seperti apa kondisi kereta kami?
Nah gerobak kami akan memiliki banyak item, bisa berupa array dan jumlah yang awalnya nol, jadi jumlah total yang bisa Anda katakan, Anda
tentu saja dapat menyebutkan jumlah total ini mungkin untuk membuatnya sangat jelas
apa ini.
Jadi ini adalah dua hal yang membentuk gerobak saya di sini
dan seperti biasa, saya tidak bisa cukup menekankan ini, ada lebih dari satu cara menerapkan ini. Jadi jika Anda ingin mengelola beberapa data lain di
sini juga, pasti melakukannya, tidak
ada pendekatan
yang benar atau salah, ini hanya
pendekatan saya dalam membangun aplikasi ini.
Sekarang penting bahwa untuk kereta ini di sini, saya ingin memastikan bahwa jika kita sudah memiliki
barang di kereta, katakanlah baju merah dan saya klik untuk gerobak
kedua kalinya, saya tidak menambahkan dua item ke array ini tetapi Saya masih hanya memiliki satu item di sana dan sebagai
gantinya setiap item dalam array item harus menjadi objek tempat saya mengelola seperti ID produk mungkin, di mana saya memiliki
judul dan jumlah item dalam keranjang, sehingga kemudian
akan ubah ke 2 jika saya klik untuk yang kedua kalinya.
Oleh karena itu Anda sebenarnya bisa juga berpendapat bahwa item mungkin tidak boleh berupa array tetapi mungkin objek Javascript karena itu memungkinkan kita
untuk menyimpan ID produk sebagai kunci dan nilainya bisa menjadi objek dengan judul, dengan
kuantitas, dengan harga dan itu hanya sebuah alternatif, Anda juga
bisa melakukan ini
semua dengan sebuah array tetapi itu sebenarnya pendekatan yang akan saya gunakan.
Sekarang, peredam yang saya ekspor adalah peredam yang tentu saja mendapatkan keadaan yang
memiliki keadaan awal kami sebagai nilai default dan tindakan sebagai argumen yang pada akhirnya perlu mengembalikan beberapa data.
Jadi pada akhirnya, perlu mengembalikan negara baru yang kemudian digunakan oleh Redux.
Sekarang kita perlu tindakan untuk melanjutkan.
Jadi di sini saya akan mengekspor konstanta, pengidentifikasi tindakan, dan saya akan beri nama ini ke keranjang, pengenal terserah
Anda, saya akan pergi dengan menambahkan ke keranjang seperti ini dan dalam file tindakan, saya akan membuat
seperti fungsi pembuat tindakan.
Jadi di sini konstanta
lain yang akan saya beri nama tambahkan ke keranjang yang menerima katakanlah objek produk lengkap yang ingin saya tambahkan, sehingga saya dapat
mengeluarkan informasi yang saya butuhkan dan kemudian di sini, kita harus mengembalikan objek tindakan seperti
itu yang memiliki tipe yang ditambahkan ke keranjang dan kemudian produk kami.
Ini hanyalah cara untuk membuat tindakan ini yang membuatnya sangat mudah bagi kita untuk melakukan itu di
dalam komponen kita.
Jadi pada akhirnya, dalam peredam gerobak, di semua peredam sebenarnya tapi di tempat peredam gerobak tempat kami peduli, kami
akan
mendapatkan add itu untuk aksi keranjang, jadi di sini kita perlu mengganti jenis tindakan dan menangani case yang ditambahkan ke keranjang dan oleh karena itu Anda
harus mengimpor tambahkan ke keranjang
dari folder tindakan itu dan di sana, dari file keranjang. Sekarang dan yang penting, tindakan ini ketika dikirim
diterima pada semua reduksi tetapi jika Anda tidak menanganinya dengan kasing terpisah, kasing default
Anda akan menendang yang biasanya hanya mengembalikan potongan keadaan Anda saat ini untuk reducer ini, yang berarti potongan negara
untuk peredam ini tidak berubah. Namun di sini di peredam kereta,
saya tentu saja ingin mengubah keadaan saya, maka saya menangani
untuk menambah kasing di sini dan
sekarang di tambahkan ke keranjang, apa yang harus
terjadi di sana?
Kita dapatkan produk tambahan kita, kita dapat menariknya keluar dari tindakan karena di sana dalam aksi, kita akan memiliki kunci produk, itulah yang baru
saja kita
siapkan di sini di keranjang tindakan. File js, jadi saya akan mendapatkan produk
kami dan saya menyimpannya di konstan, menambahkan produk di sini dengan mana kami dapat bekerja sekarang dan
kami akan memiliki harga produk kami di sini yang tentu saja ditambahkan Produk. harga dan kami akan memiliki judul
produk kami yang ditambahkanProduk. judul. Sebelum kita melanjutkan, mari kita tentukan bagaimana
item keranjang, jadi apa yang kita simpan di sini akan terlihat seperti, nilai yang kita miliki di sana.
Jadi saya akan pergi ke folder model saya dan menambahkan item keranjang. File js di sini dan kemudian menambahkan kelas
item keranjang yang menerima
konstruktor dan sebelum saya lupa lagi, yang perlu diekspor di sini dan sekarang
di konstruktor itu, saya berharap untuk mendapatkan jumlah produk yang akan kami tambahkan, harga produk,
judul produk dan jumlah untuk item ini, jika kita memiliki tiga kali kemeja merah, jumlah kita akan menjadi tiga kali
29. 99,
jadi sekitar $ 90.
Sekarang yang tidak saya dapatkan di sini adalah ID produk karena saya akan menggunakannya sebagai kunci di dalam objek saya di sini yang menyimpan barang
dan kemudian akan menjadi lebih jelas setelah kami menerapkannya.
Jadi di sini di item kereta, saya
hanya menyimpan semua data yang saya terima, jumlah, harga produk dan saya
punya data di sana yang saya butuhkan untuk output nanti, jadi judul produk dan jumlahnya, seperti ini dan sekarang kembali ke peredam, kita tentu saja
dapat mengimpor kelas item keranjang ini dari folder model dan dari item keranjang di sini dan
sekarang kembali ke dalam menambahkan ke keranjang kasus di sana, kita pertama-tama perlu mencari
tahu apakah produk itu sudah menjadi bagian dari barang kami.
Sekarang seperti yang saya sebutkan, saya akan menambahkan setiap produk baru dengan menambahkan kunci baru ke item yang merupakan ID dari
produk itu, karena itu
unik kami selalu memiliki setiap kunci hanya sekali dan kemudian nilainya akan menjadi item keranjang seperti yang baru
saja kami lakukan. mendefinisikannya dalam model dan karenanya saya tahu jika ID produk yang saya dapatkan di sini sudah
merupakan kunci barang, maka ini sudah memiliki barang kami sebagai barang keranjang.
Jadi di sini, kita cukup memeriksa apakah item untuk tambahProduk. ID ada, jadi jika itu mengembalikan sesuatu yang
benar-benar, jadi tidak terdefinisi, maka kita sudah memiliki item dalam keranjang yang tidak apa-apa tapi kemudian kita hanya perlu
mengubah kuantitasnya, kalau tidak
kita perlu menambahkan item baru.
Jadi mari kita mulai dengan kasing yang lain karena itulah kasing yang
pertama kali kita
temui ketika kita menambahkan sesuatu untuk pertama kali, di sana kita memerlukan item
keranjang baru, saya membuatnya dengan kata kunci baru dan kelas item keranjang yang saya tetapkan dan di sana ,
kita perlu memberikan jumlah yang tentu
saja adalah satu jika kita hanya menambahkan item baru, kita perlu memberikan harga produk, judul produk di sini dan jumlah dan jumlah tentu
saja awalnya hanya harga produk kita, kan?
Karena jika kita menambahkan satu item dari harga itu, maka jumlah untuk item keranjang ini adalah harga produk kami dan sekarang item
keranjang baru ini harus ditambahkan ke item keranjang kami di sini.
Jadi di sini, kami mengembalikan salinan status kami dan kami
menyetel item sama dengan objek baru tempat saya menyalin semua item status saya yang ada, sehingga saya menyalin
objek item
yang ada di sini dan kemudian saya menambahkan kunci baru dengan sintaksis dinamis ini dengan
tanda kurung di mana nama kunci ditambahkanProduk. ID, itulah yang saya maksud dengan ID produk yang menjadi kunci dalam
objek item kami dan nilainya adalah item keranjang baru kami.
Ini hanya sebuah sintaks yang harus Anda ketahui, ini adalah vanilla Javascript, ini adalah bagaimana Anda dapat menambahkan atau
mengakses sebagai properti dinamis di sini alih-alih hardcoding sebagai string di sini. Ngomong-ngomong, ini di sini tentu
saja juga harus menyatakan. barang, kesalahan saya. Maka dengan ini, kita harus menambahkan item keranjang baru di sini.
Sekarang jika Anda sudah memiliki item dalam keranjang, maka tentu saja kami tidak membuat
item keranjang baru, sebaliknya kami ingin memperbarui yang sudah ada. Jadi saya akan memiliki item keranjang saya yang
diperbarui di sini dan untuk itu, saya masih membuat item
keranjang baru tetapi saya akan mengisinya dengan beberapa data yang ada, misalnya jumlah di sini. Kami memperolehnya dari item negara untuk ID produk yang ditambahkan karena itu seharusnya sudah menjadi bagian dari
item negara, kami memeriksa ini di sini dan ini akan memiliki kunci kuantitas tentu saja
karena item seperti di sini di item saya hanya ketik item keranjang, jadi ia akan memiliki properti
kuantitas dan
kami hanya menambahkan satu untuk itu karena kami menambahkan item
keranjang baru, jadi kami harus menambah ini. Sekarang item keranjang sebagai argumen kedua mengambil harga produk. Maka tentu saja karena kita akan membangun
aplikasi sehingga harga tidak pernah berubah yang akan menambah banyak kerumitan di sini, kita
harus mengelola keranjang dengan cara yang sama sekali berbeda dalam hal ini, kita harus menyimpan setiap
item keranjang sebagai daftar transaksi untuk item kereta ini yang terlalu banyak untuk ini di sini.
Jadi karena ini tidak pernah berubah, karena harga tidak pernah berubah, kita bisa pada akhirnya hanya mengambil
harga prod yang kita dapatkan atau mengambil harga yang sudah kita simpan sebelumnya karena itu lagi tidak akan pernah berubah.
Judul mungkin berubah dan saya ingin menyimpan judul terbaru di sini, jadi saya pasti akan mengambil
salah satu produk yang kami dapatkan di sini, bukan snapshot lama saya dan yang
terakhir, nilai terakhir di sini, jumlah total saya untuk item keranjang ini, yang tentu saja
adalah jumlah saat ini, jadi saya mengakses item status untuk ID di sini, jumlah plus harga produk karena kami menambahkan satu item baru di sini,
kami harus menambahkan harga kali 1 ke jumlah saat ini. Itu item keranjang yang
diperbarui.
Sekarang dengan itu, kita dapat mengembalikan potongan negara baru kita di sini dengan menyalin negara lama dan menyetel item yang sama dan
sekarang penting, ke objek tempat kita menyalin negara. item tapi di mana kita sekarang lagi mengatur tambahProduk. ID dan ya, ini sudah ada tetapi dengan
itu kami hanya menimpanya dengan item keranjang kami yang diperbarui, jadi kami melakukan pembaruan yang sama dengan yang
kami lakukan di sana. Namun sekarang tidak semua
yang perlu kita lakukan, kita perlu mengubah
jumlah total juga karena itu tentu saja berubah.
Jadi ketika kita menambahkan item untuk pertama kalinya, maka jumlah total pada dasarnya harus menjadi jumlah total lama kita, jadi sebutkan
jumlah total ditambah harga produk dan itu sama jika kita menambahkan item ke
keranjang yang ada atau ketika sudah ada di sana karena pada akhirnya, total kami selalu saja total lama
ditambah harga, karena kami selalu menambahkan satu item dari produk itu, begitulah cara
aplikasi ini akan bekerja.
Jadi pernyataan pembaruan kami di sini hampir
sama, satu-satunya hal yang berbeda di sini adalah bagaimana kami membuat item keranjang itu, karena itu
tentu saja kami juga dapat menggunakan kembali kode ini, pindahkan ini dari blok if else dan alih-alih memiliki
dua konstanta berbeda di sini , kita dapat membuat variabel sebelum kita
memasukkan pernyataan if, diperbarui atau item keranjang baru
mungkin, itu bisa menjadi nama karena kita tidak tahu apa yang akan terjadi
di muka dan kemudian di sini di cabang if di sini, kita menetapkan yang diperbarui atau item keranjang baru ke item keranjang yang diperbarui ini, di
sini di sisi lain kami menyetelnya ke item keranjang baru ini dan di sini, kami kemudian selalu menggunakan item
keranjang yang diperbarui atau baru dan dengan itu, kami memiliki beberapa penggunaan kembali kode di
sini dan tidak ulangi diri kita sendiri yang selalu baik. Satu sisi catatan lain, menyalin keadaan di sini
tentu saja selalu berlebihan karena Anda selalu mengatur item dan jumlah total.
Jadi, jika Anda selalu hanya memiliki dua bidang ini di sini dan Anda selalu mengubah keduanya, Anda
tidak perlu menyalin status yang ada, jika Anda pernah memperkenalkan sepotong data lain ke potongan negara Anda di sini yang tidak
Anda ubah di sini namun, Anda harus menyalin kondisi lama agar tidak kehilangan data tambahan
itu.
Oleh karena itu di sini saya akan meninggalkan fungsi penyalinan itu meskipun kita tidak secara teknis membutuhkannya
di sini tetapi jika kita harus mengubah keadaan kita di mana disimpan dan kita
tidak lupa menyalinnya dan karena itu kita kehilangan data.
Yah, ada banyak pekerjaan, dengan
itu kita bisa mulai mengirimkan tindakan
ini dan tentu saja, saya ingin mengirimnya dari tinjauan produk dan detail
produk karena di kedua layar, saya telah menambahkan tombol keranjang.
Jadi mari kita mulai pada layar gambaran umum produk, di sana untuk mengirim
tindakan Redux kita
perlu menyertakan kait pengiriman yang digunakan di sini, dengan itu di sini kita cukup mendapatkan akses ke fungsi pengiriman ini dengan memanggil
menggunakan pengiriman seperti ini dan sekarang ketika kita klik add to gerobak di sana, kami dapat mengirimkan tindakan kami di
sini dan tentu saja dengan cara alih-alih menggunakan fungsi inline di sini,
Anda dapat memiliki fungsi yang disimpan
dalam konstanta terpisah di dalam komponen fungsional Anda di sini, sebagai alternatif, saya akan tetap menggunakan fungsi inline untuk sekarang dan saya akan
mengimpor semua tindakan saya di sini sebagai tindakan keranjang dari folder toko dan di sana, folder tindakan, file keranjang.
Sekarang ini adalah sintaks impor yang menggabungkan semua ekspor dari file menjadi satu objek, kami
hanya memiliki satu ekspor di sini karena itu Anda
juga dapat menargetkan ekspor tertentu, kemudian
kami akan memiliki beberapa ekspor dan karenanya saya akan menggunakan pendekatan ini.
Jadi di sini, kami kemudian mengirim tindakan keranjang.
tambahkan ke troli dan ini adalah fungsi yang harus kita jalankan, ini adalah fungsi pembuat tindakan kita
dan ini sebagai argumen yang
mengambil produk kita, jadi pada akhirnya di sini, kita harus memasukkan itemData. item yang hanya produk kami di sini di layar
detail produk.
Oleh karena itu kami melakukan hal yang sama persis, kami mengimpor menggunakan pengiriman dari React Redux, oleh karena
itu di sini kita bisa mendapatkan akses ke fungsi pengiriman dengan memanggil use
dispatch dan kemudian untuk tombol ini di sini di fungsi inline atau dalam fungsi bernama terpisah
jika Anda suka itu
, Anda dapat memanggil pengiriman, sekarang kami perlu mengimpor tindakan kami dan saya akan
menggunakan sintaks yang sama seperti sebelumnya di mana saya mengimpor semuanya sebagai tindakan keranjang dari folder toko, folder tindakan, file keranjang dan sekarang tindakan keranjang, panggilan tambahkan ke keranjang di
sini dan teruskan produk yang dipilih yang merupakan produk kami yang ingin kami tambahkan ke keranjang di sini.
Mudah-mudahan ini mengirimkan tindakan sedemikian sehingga item ditambahkan ke troli tetapi tentu saja saat ini kami
tidak dapat mengonfirmasi hal ini.
Sebenarnya kita bisa. Anda dapat memutar React Nger debugger dan saya belum pernah menggunakan
ini sebelumnya tetapi di sana, Anda sekarang dapat menekan perintah atau kontrol t untuk membuka tab baru, lalu
konfirmasikan
impor ini
di sini, lalu buka aplikasi Anda dan di sana, buka menu debug pada iOS dengan perintah D, di Android
dengan kontrol atau perintah M dan klik debug Javascript jarak jauh. Sekarang saya membuka di Port 19003 sebenarnya, jadi saya membuka React Native debugger
di port yang
salah, pilih saya lagi tekan perintah T atau kontrol T di debugger dan pilih 19003, gunakan port apa saja
yang terbuka untuk Anda di Chrome, klik konfirmasi dan sekarang ini menghubungkan ke aplikasi Bereaksi Anda yang sedang berjalan di sini di debugger, pastikan
Anda menutup debugger Chrome Anda dan kemudian memuat ulang aplikasi Anda, sekarang
ini harus terhubung di sini dan sekarang Anda tidak hanya dapat
memeriksa aplikasi Anda di sini
seperti
yang saya jelaskan sebelumnya, tidak, Anda juga bisa lihat bagian di sana dan itu adalah debugger Redux
Anda, di sana Anda dapat melihat apa yang Redux lakukan untuk Anda.
Satu-satunya hal yang harus Anda lakukan untuk membuatnya berfungsi adalah menginstal paket baru
dengan instal npm - save dev karena ini adalah ketergantungan pengembangan
yang hanya kita perlukan selama pengembangan dan di sana, instal ekstensi alat Redux dev,
buka aplikasi Anda . File js sesudahnya
dan kemudian impor dari
ekstensi alat Redux dev ini. Anda dapat mengimpor komposisi dengan alat dev dari sana dan itu
adalah fungsi yang Anda berikan untuk membuat store sebagai argumen kedua, Anda dapat
menjalankannya di sana seperti ini. Ngomong-ngomong, ini adalah kode, ini
impor dan penggunaan
ini harus Anda hapus sebelum Anda menyebarkan aplikasi Anda karena ini hanya sesuatu yang harus berjalan
selama pengembangan, bukan di aplikasi produksi Anda, Anda perlu menghapusnya sebelum Anda
menggunakan aplikasi Anda tetapi selama pengembangan, itu baik-baik saja. Dan dengan itu ditambahkan, jika Anda sekarang menyimpan ini, Anda
benar-benar akan melihat bahwa di sini di Inspektur Redux ini, Anda melihat tindakan init dikirim, Anda tidak melihat itu sebelumnya.
Itu tindakan yang secara otomatis dikirim ketika aplikasi Anda mulai.
Jika sekarang saya klik untuk keranjang di sini, Anda juga akan melihat tindakan tambahkan ke
keranjang dan sekarang di sini, Anda dapat melihat detail tentang tindakan itu seperti data yang dilampirkan padanya dan
tentang keadaan Anda di sini dan di sana Anda melihat contoh ini Apakah kondisi produk saya dan di
mana kondisi keranjang saya?
Yah itu tentu saja hilang karena sementara kita memiliki peredam dalam aksi diatur, di app. File js, dalam
reduksi gabungan, kami tidak termasuk status keranjang.
Jadi, ayo impor peredam kereta dari. / StoreReducers / gerobak dan sekarang dengan yang diimpor, kita dapat menambahkannya ke
objek reduksi gabungan kita dan sekarang di sana, kita menambahkan irisan gerobak misalnya, arahkan ke peredam gerobak dan karena
itu sekarang ini dimasukkan ke dalam toko Redux kami. Dengan itu jika Anda sekarang menunggu ini untuk memuat
ulang dan Anda mengklik ke troli lagi, sekarang dalam tindakan add to cart, dalam keadaan,
Anda akan melihat bahwa sekarang ada irisan gerobak dan sekarang Anda melihat ada jumlah total,
Anda melihat ada item dengan kunci P1 yang merupakan produk kami dengan jumlah 1,
harga itu, jumlah ini dan jika saya sekarang klik untuk troli yang kedua kali di sini, ada tindakan lain yang dikirim dan jika kami
memiliki lihat keadaan setelah tindakan ini, kita sekarang melihat, mendinginkan hanya satu item tetapi
sekarang dengan kuantitas dua, harga produk per item adalah ini tetapi
jumlahnya adalah ini.
Ini adalah
baju itu, jika saya sekarang mengirim karpet biru juga,
kita harus menambah keranjang sekali lagi dan di sana di negara bagian, kita sekarang memang
melihat ada dua item di
sana, P1 dan P2, P1 tidak berubah tetapi P2 sekarang ditambahkan dan jumlah total juga terlihat bagus untuk saya.
Jadi ini sepertinya bekerja dan ini adalah bagaimana Anda dapat melihat ke dalam kondisi Redux Anda saat aplikasi Anda berjalan tanpa
mengeluarkannya di sini.
Sekarang tentu saja, kami juga ingin menampilkannya secara visual tetapi ini adalah cara yang bagus untuk
melihat keadaan Anda di balik layar dengan bantuan debugger React Native.
Sekarang kita akan menutupnya di sini karena memperlambat aplikasi sedikit dan karena itu di sini
di menu debug, saya juga akan menghentikan debugging jarak jauh saya dan tutup inspektur di sini sepenuhnya.
Juga kembali dalam aplikasi. File js, saya akan menyingkirkan kompos dengan hal-hal alat dev
di sini sehingga saya
tidak melupakannya nanti tetapi Anda selalu dapat menambahkan ini di sini atau meninggalkannya di sini saat Anda sedang mengembangkan sehingga
Anda dapat melihat ke toko Anda.
Keuntungan utama bagi kami di sini adalah
bahwa ini tampaknya berhasil dan dengan kerja itu, tentu saja kami sekarang dapat bekerja pada menambahkan tombol tindakan di sini
ke header dan memastikan kami dapat pergi ke halaman kereta dari itu atau dengan bantuan itu tombol aksi sehingga
pada halaman keranjang, kami dapat menampilkan informasi keranjang kami.