Persiapan Data untuk Objek Action di Redux

Baru-baru ini kita telah membahas bahwa fungsi createSlice mengharapkan satu argumen saat membuat action.payload. Di satu sisi, ini menyederhanakan penggunaannya, di sisi lain mungkin membutuhkan langkah tambahan untuk mempersiapkan isi dari objek action.

Mari buka aplikasi kita dengan produk, dan di dalamnya file NewProductForm.jsx. Perhatikan baris kode berikut:

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

Di sini kita menyusun objek payload langsung di komponen React dan meneruskannya ke action productAdded. Bagaimana jika kita harus mengirim action yang sama dari beberapa komponen atau logika untuk menyusunnya ternyata rumit? Idealnya, komponen kita seharusnya tidak peduli bagaimana tampilan objek dalam payload untuk action tersebut. Selain itu, kita tidak nyaman dengan duplikasi kode yang terus-menerus.

Masalah-masalah ini kembali dapat dipecahkan oleh createSlice kita yang terkenal, karena saat menulis reducer, ia memungkinkan kita menggunakan fungsi callback prepare, di mana kita dapat menulis berbagai logika, menghasilkan angka acak, dan sebagainya. Dalam hal ini, nilai untuk field reducer dapat disajikan dalam bentuk objek berikut:

{reducer, prepare}

Mari buka file kita productsSlice.js dan ubah kode untuk reducer productAdded. Sekarang potongan kode ini:

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

Kita ubah menjadi berikut, di mana fungsi reducer akan menangani pembaruan state di store, dan prepare - mengembalikan objek payload dengan id yang dihasilkan dan data kami lainnya:

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

Karena sekarang kita akan menghasilkan id di sini, bukan di komponen, mari tambahkan nanoid ke dalam import:

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

Terakhir, mari lakukan perubahan pada NewProductForm.jsx. Alih-alih baris:

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

Kita akan memiliki yang seperti ini, di mana kita cukup menyampaikan data yang kita butuhkan melalui koma (jangan lupa di file ini untuk menghapus nanoid dari import):

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

Jalankan aplikasi, lalu buat produk baru dan pastikan bahwa kita tidak merusak apa pun.

Buka aplikasi Anda dengan siswa. Di file StudentsSlice.js tulis ulang reducer Anda studentAdded sedemikian rupa, sehingga ia berada dalam bentuk objek {reducer, prepare}, seperti yang ditunjukkan dalam pelajaran.

Lakukan perubahan yang sesuai di file NewStudentForm.jsx, seperti yang ditunjukkan dalam pelajaran. Jalankan aplikasi dan pastikan bahwa semuanya bekerja seperti sebelumnya.