Penghantaran Action dan Hook useDispatch dalam Redux

Kami telah melaksanakan hampir semua komponen untuk aplikasi Redux berfungsi. Yang tinggal hanyalah memahami cara menghantar action dari komponen React. Mari kita mulakan.

Buka aplikasi produk kami. Dalam borang komponen NewProductForm, kami mempunyai butang untuk menyimpan data produk baru. Mari tambahkan pengendali klik padanya. Biarkan pengendali onSaveProductClick diaktifkan apabila diklik:

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

Apabila mencipta produk baru, kami memerlukan id baru untuknya. Kami akan menjanakannya menggunakan pustaka terkenal nanoid. By the way, ia tidak perlu dipasang, kerana ia sudah disertakan dengan pakej RTK. Mari tambahkan nanoid dalam import:

import { nanoid } from '@reduxjs/toolkit'

Kami juga ingat bahawa satu-satunya cara untuk mengubah state - adalah dengan memanggil kaedah dispatch, yang ada pada store dan menyampaikan objek action. Untuk mencapai kaedah ini, kami akan menggunakan hook React-Redux useDispatch. Mari importnya:

import { useDispatch } from 'react-redux'

Dalam kod fungsi NewProductForm, mari isytiharkan constant dispatch untuknya sejurus selepas kami mengisytiharkan constant untuk state lokal kami:

const dispatch = useDispatch()

Kami juga perlu mengimport action creator productAdded, yang kami peroleh dalam pelajaran lepas:

import { productAdded } from './productsSlice'

Sekarang kami boleh menulis fungsi pengendali onSaveProductClick. Mari lakukan ini sebelum arahan return:

const onSaveProductClick = () => {}

Di dalam fungsi, kami memanggil dispatch, membentuk objek action, di dalam sifat payload yang akan dimasukkan id yang dijana, nama, keterangan, harga dan kuantiti produk. Semua data ini kami ambil dari state lokal. Pada masa yang sama, pada permulaan kami menyemak dalam keadaan sama ada semua medan diisi - hanya dalam kes ini kami memanggil dispatch. Pada akhir kod fungsi, kami mengembalikan state lokal kepada keadaan asal:

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

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

Sekarang mari lancarkan aplikasi kami, masukkan data ke dalam medan borang dan tekan butang simpan. Hooray, produk baru muncul di bahagian bawah halaman. Dengan membuka Redux DevTools, dan di dalamnya tab Inspector, kami melihat bahawa di sebelah kiri selain @@INIT, action kami juga muncul products/productAdded. Dan di bahagian kanan kami boleh klik pada tab Action dan State, sambil menukar antara @@INIT dan products/productAdded. Sekarang kami melihat bahawa produk baru kami ditambah. Juga pada tab Action kami melihat action, yang dijana secara automatik menggunakan createSlice (klik, sebagai contoh, pada Raw). Hooray: kami tidak perlu menulisnya secara manual.

Buka aplikasi pelajar anda, kemudian fail NewStudentForm.jsx, pasang pengendali klik pada butang simpan.

Tulis semua import yang diperlukan dan tulis fungsi-pengendali onSaveStudentClick, menggunakan kaedah dispatch seperti yang ditunjukkan dalam pelajaran.

Lancarkan aplikasi, masukkan data ke dalam medan borang dan tekan pada butang simpan. Pastikan bahawa pelajar baru telah ditambah di bahagian bawah halaman.

Buka Redux DevTools dan telusuri tab Action dan State, pastikan bahawa objek baru dengan pelajar ditambah. Lihat pada objek action yang telah dijana, hantarkannya dalam jawapan untuk tugas ini.