Mengirim Action dan Hook useDispatch di Redux

Kami telah menerapkan hampir semua komponen untuk menjalankan aplikasi Redux. Tinggal memahami cara mengirim action dari komponen React. Mari kita mulai.

Buka aplikasi produk kita. Di form komponen NewProductForm kita punya tombol untuk menyimpan data produk baru. Mari tambahkan handler klik padanya. Misalkan saat diklik, handler onSaveProductClick akan dijalankan:

<button type="button" onClick={onSaveProductClick}>
	save
</button>

Saat membuat produk baru, kita memerlukan id baru untuknya. Kita akan menghasilkannya menggunakan library yang terkenal nanoid. Omong-omong, tidak perlu menginstalnya, karena sudah termasuk dalam paket RTK. Mari tambahkan nanoid ke dalam import:

import { nanoid } from '@reduxjs/toolkit'

Kita juga ingat bahwa satu-satunya cara mengubah state - adalah dengan memanggil method dispatch, yang dimiliki oleh store dan meneruskan objek action. Untuk mengakses method ini, kita akan menggunakan hook React-Redux useDispatch. Mari impor hook tersebut:

import { useDispatch } from 'react-redux'

Dalam kode fungsi NewProductForm, mari deklarasikan konstanta dispatch untuknya segera setelah kita mendeklarasikan konstanta untuk state lokal kita:

const dispatch = useDispatch()

Kita juga perlu mengimpor action creator productAdded, yang kita dapatkan pada pelajaran sebelumnya:

import { productAdded } from './productsSlice'

Sekarang kita dapat menulis fungsi handler onSaveProductClick. Mari lakukan ini sebelum perintah return:

const onSaveProductClick = () => {}

Di dalam fungsi, kita memanggil dispatch, membentuk objek action, di mana properti payload akan berisi id yang dihasilkan, nama, deskripsi, harga, dan jumlah produk. Semua data ini kita ambil dari state lokal. Pada saat yang sama, di awal kita memeriksa dalam kondisi apakah semua field sudah diisi - hanya dalam kasus ini kita memanggil dispatch. Di akhir kode fungsi, kita mengembalikan state lokal ke keadaan semula:

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productAdded({
				id: nanoid(),
				name,
				desc,
				price,
				amount
			})
		)

		setName('')
		setDesc('')
		setPrice(0)
		setAmount(0)
	}
}

Sekarang jalankan aplikasi kita, masukkan data ke dalam field form dan tekan tombol simpan. Hore, di bagian bawah halaman muncul produk baru. Membuka Redux DevTools, dan di dalamnya tab Inspector, kita melihat bahwa di sebelah kiri selain @@INIT muncul juga action kita products/productAdded. Dan di bagian kanan kita dapat mengeklik tab Action dan State, sambil beralih antara @@INIT dan products/productAdded. Sekarang kita melihat produk baru kita ditambahkan. Juga pada tab Action kita melihat action, yang dihasilkan secara otomatis menggunakan createSlice (klik, misalnya, pada Raw). Hore: kita tidak perlu menuliskannya secara manual.

Buka aplikasi Anda dengan siswa, lalu file NewStudentForm.jsx, pasang pada tombol simpan handler klik.

Tulis semua import yang diperlukan dan tulis fungsi handler onSaveStudentClick, dengan menerapkan method dispatch seperti yang ditunjukkan dalam pelajaran.

Jalankan aplikasi, masukkan ke dalam field form data dan tekan tombol simpan. Pastikan bahwa di bagian bawah halaman telah ditambahkan siswa baru.

Buka Redux DevTools dan jelajahi tab Action dan State, pastikan bahwa objek baru dengan siswa ditambahkan. Lihat objek action yang dihasilkan, kirimkan dalam tanggapan untuk tugas ini.