Mengubah Data Produk di Redux Store

Kita telah belajar menambahkan produk, tetapi bagaimana jika kita ingin mengubah informasi tentang produk? Mari kita bahas cara melakukannya dalam pelajaran ini dan selanjutnya.

Buka aplikasi produk kita dan masuk ke file productsSlice.js. Kita mulai dari yang kita perlukan untuk slice products menulis reducer lain, yang akan dijalankan saat produk diperbarui. Sebut saja productUpdated dan tambahkan ke field reducers setelah reducer productAdded. Juga berikan parameter state dan action, yang berdasarkan itu, seperti yang kita ingat, reducer bekerja:

reducers: {
	productAdded(state, action) {
		state.push(action.payload)
	},
	productUpdated(state, action) {},
},

Sekarang mari kita pikirkan, data apa yang kita perlukan untuk memperbarui produk. Pertama-tama - ini adalah id, dengan itu kita dapat menemukan produk yang kita minati di store. Data lainnya - nama, deskripsi, harga, dan jumlah akan kita gunakan untuk perubahan. Semua nilai ini akan kita dapatkan dari properti payload objek action, yang akan datang kepada kita, dan, jika kita menulisnya secara manual, maka akan terlihat seperti yang ditunjukkan di bawah ini. Perhatikan bahwa nilai yang diharapkan dari properti payload - satu argumen, jadi kita akan menyampaikan objek ke sini (tentang ini kita akan bicara selanjutnya):

{
	type: 'products/productUpdated',
	payload: {id, name, desc, price, amount}
}

Setelah mengetahui poin-poin utamanya, sekarang kita bisa menulis kode di dalam kurung kurawal untuk productUpdated. Pertama, dapatkan dari objek action data yang diubah:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
},

Sekarang kita akan temukan berdasarkan id yang didapat, produk yang perlu diubah:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
},

Jika produk seperti itu ditemukan di store, maka kita akan mengganti datanya dengan nilai baru:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
	if (desiredProduct) {
		desiredProduct.name = name
		desiredProduct.desc = desc
		desiredProduct.price = price
		desiredProduct.amount = amount
	}
},

Kita tinggal mengekspor action creator untuk digunakan di komponen, yang akan dengan mudah dibuat untuk kita oleh createSlice. Mari tambahkan ke ekspor di akhir file, bersama dengan productAdded yang sudah ada:

export const { productAdded, productUpdated } = productsSlice.actions

Buka aplikasi Anda dengan siswa. Setelah mempelajari materi pelajaran, di file studentsSlice.js tulislah reducer lain untuk productsSlice, yang akan memperbarui data siswa di store jika diubah oleh pengguna. Sebut saja studentUpdated.

Dan bagaimana kira-kira objek action Anda dalam kasus ini? Kirimkan kodenya dalam jawaban.

Di akhir file, ekspor action creator studentUpdated yang didapat.