Mengubah Data Produk dalam Redux Store

Kita telah belajar menambah produk, tetapi bagaimana sekiranya kita mahu mengubah maklumat tentang produk? Mari kita lihat cara untuk melakukannya dalam pelajaran ini dan seterusnya.

Buka aplikasi produk kita dan masuk ke fail productsSlice.js. Mari kita mulakan dengan menulis satu lagi reducer untuk slice products yang akan dijalankan apabila produk dikemas kini. Mari namakannya productUpdated dan tambahkan ke dalam medan reducers selepas reducer productAdded. Juga berikan kepadanya parameter state dan action, yang kita ingati sebagai asas cara reducer berfungsi:

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

Sekarang mari kita fikirkan, data apakah yang kita perlukan untuk mengemas kini produk. Pertama sekali - ialah id, dengannya kita boleh mencari produk yang kita minati dalam store. Data-data lain - nama, keterangan, harga dan kuantiti akan kita gunakan untuk perubahan. Semua nilai ini kita akan dapat dari sifat payload objek action, yang akan sampai kepada kita, dan, jika kita menulisnya secara manual, ia akan kelihatan seperti yang ditunjukkan di bawah. Perhatikan bahawa nilai jangkaan sifat payload - satu hujah, jadi kita akan menghantar objek ke sini (kita akan bincangkan ini selanjutnya):

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

Setelah mengetahui perkara-perkara utama, sekarang kita boleh menulis kod untuk productUpdated dalam kurungan kerawang. Pertama, dapatkan data yang diubah dari objek action:

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

Sekarang kita akan cari produk yang perlu diubah menggunakan id yang diperoleh:

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

Sekiranya produk tersebut ditemui dalam store, maka kita akan gantikan datanya dengan nilai-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 hanya perlu mengeksport action creator untuk digunakan dalam komponen, yang akan dibuat untuk kita oleh createSlice. Mari tambahkannya ke eksport di akhir fail, bersama-sama dengan productAdded yang sedia ada:

export const { productAdded, productUpdated } = productsSlice.actions

Buka aplikasi pelajar anda. Setelah mempelajari bahan pelajaran, dalam fail studentsSlice.js tulis satu lagi reducer untuk productsSlice, yang akan mengemas kini data pelajar dalam store sekiranya ia diubah oleh pengguna. Namakannya studentUpdated.

Dan bagaimanakah rupa objek action anda dalam kes ini? Hantarkan kodnya dalam jawapan.

Di akhir fail, eksport action creator studentUpdated yang diperoleh.