Reducer dan Action di Redux

Pada pelajaran sebelumnya kita telah menyelesaikan formulir untuk menambahkan produk dan menampilkannya di halaman utama. Namun data yang ditambahkan belum disimpan, dengan kata lain produk baru tidak ditambahkan ke yang sudah ada di store. Mari kita perbaiki ini.

Pertama-tama, dalam aplikasi produk kita buka file productsSlice.jsx dan tulis di properti reducer untuk createSlice fungsi productAdded, yang akan menangani penambahan produk ke store berdasarkan state saat ini dan action yang diberikan kepadanya. Perlu dicatat bahwa di sini yang diteruskan kepada kita bukan seluruh state, tetapi hanya bagiannya yang bertanggung jawab untuk produk (slice products hanya tahu tentang bagian itu). Objek dengan produk baru akan berada di properti payload dari objek action, yang akan dihasilkan oleh handler saat tombol simpan ditekan dalam formulir. Hasilnya, reducer productAdded akan terlihat dalam kode createSlice seperti ini:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {
		productAdded(state, action) {
			state.push(action.payload)
		},
	},
})

Bagaimana dengan action? Di awal tutorial kami menyebutkan bahwa action adalah suatu peristiwa, yang direpresentasikan dalam bentuk objek, yang menggambarkan apa yang terjadi dalam aplikasi. Kami juga berbicara tentang bahwa kita dapat menggunakan fungsi action creator, yang akan membuat untuk kita objek seperti itu, misalnya seperti ini:

const addProduct = newProduct => {
	return {
		type: 'products/productAdded',
		payload: newProduct
	}
}

Kabar baiknya adalah kita tidak perlu melakukan apa pun, karena ini akan dilakukan untuk kita oleh fungsi createSlice yang kita gunakan. Segera setelah kita menulis reducer, fungsi tersebut secara otomatis akan membuat untuk kita action creator dengan nama yang sama. Kita hanya perlu mengekspor action creator yang dihasilkan untuk digunakan lebih lanjut di komponen. Mari lakukan ini di akhir file sebelum mengekspor reducer, seperti ini:

export const { productAdded } = productsSlice.actions
export default productsSlice.reducer

Buka aplikasi Anda dengan siswa, kemudian file studentsSlice.jsx, tambahkan nilai bidang reducer untuk createSlice, seperti yang ditunjukkan dalam pelajaran.

Tambahkan di akhir file studentsSlice.jsx ekspor fungsi action creator yang dihasilkan.