Penyediaan Data untuk Objek Action dalam Redux

Baru-baru ini kita telah bercakap tentang fungsi createSlice mengharapkan satu argumen apabila mencipta action.payload. Di satu pihak, ini memudahkan penggunaannya, di pihak lain mungkin memerlukan pergerakan tambahan untuk menyediakan kandungan objek action.

Mari buka aplikasi kami dengan produk, dan dalamnya fail NewProductForm.jsx. Perhatikan baris kod berikut:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Di sini kami mengumpulkan objek payload terus dalam komponen React dan menghantarnya ke action productAdded. Bagaimana jika kami perlu menghantar action yang sama dari beberapa komponen atau logik untuk pembinaannya menjadi kompleks? Pada dasarnya, komponen kami tidak sepatutnya peduli bagaimana rupa objek dalam payload untuk action tersebut. Tambahan pula, kami tidak berpuas hati dengan penduaan kod yang berterusan.

Masalah-masalah ini sekali lagi boleh dibantu diselesaikan oleh createSlice kami yang terkenal, kerana apabila menulis reducer, ia membolehkan kami menggunakan fungsi callback prepare, di mana pelbagai logik boleh ditulis, nombor rawak dijana dan sebagainya. Dalam kes sedemikian, nilai untuk medan reducer boleh diwakili dalam bentuk objek berikut:

{reducer, prepare}

Mari buka fail kami productsSlice.js dan ubah kod untuk reducer productAdded. Sekarang coretan kod ini:

productAdded(state, action) {
	state.push(action.payload)
},

Kami akan menukarnya kepada berikut, di mana fungsi reducer akan mengendalikan pengemaskinian state dalam store, dan prepare - mengembalikan objek payload dengan id yang dijana dan data kami yang lain:

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

Memandangkan sekarang kami akan menjana id di sini, dan bukan dalam komponen, mari tambahkan nanoid dalam import:

import { createSlice, nanoid } from '@reduxjs/toolkit'

Akhir sekali, mari buat perubahan dalam NewProductForm.jsx. Daripada baris:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Kami akan mempunyai ini, di mana kami hanya menghantar data yang diperlukan kami melalui koma (jangan lupa dalam fail ini untuk membuang nanoid dari import):

dispatch(productAdded(name, desc, price, amount))

Mari lancarkan aplikasi, kemudian cipta produk baru dan pastikan kami tidak merosakkan apa-apa.

Buka aplikasi anda dengan pelajar. Dalam fail StudentsSlice.js tulis semula reducer anda studentAdded sedemikian rupa, supaya ia dalam bentuk objek {reducer, prepare}, seperti yang ditunjukkan dalam pelajaran.

Buat perubahan yang sesuai dalam fail NewStudentForm.jsx, seperti yang ditunjukkan dalam pelajaran. Lancarkan aplikasi dan pastikan bahawa semuanya berfungsi seperti dahulu.