การส่ง action และ hook useDispatch ใน Redux

เราได้นำองค์ประกอบทั้งหมดที่จำเป็นสำหรับการทำงานของแอปพลิเคชัน Redux ไปใช้จริงเกือบทั้งหมดแล้ว สิ่งที่เหลือคือการทำความเข้าใจเกี่ยวกับการส่ง action จากคอมโพเนนต์ React เท่านั้น เริ่มกันเลย

เปิดแอปพลิเคชันเกี่ยวกับผลิตภัณฑ์ของเรา ในฟอร์มของคอมโพเนนต์ NewProductForm เรามีปุ่มสำหรับบันทึกข้อมูลของผลิตภัณฑ์ใหม่ มาเพิ่ม handler การคลิกให้กับมันกัน เมื่อคลิกที่ปุ่ม ให้ handler onSaveProductClick ทำงาน:

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

เมื่อสร้างผลิตภัณฑ์ใหม่ เราจะต้องมี id ใหม่สำหรับมัน เราจะสร้าง id นั้นโดยใช้ไลบรารีชื่อดังอย่าง nanoid อนึ่ง ไม่จำเป็นต้องติดตั้งมันเพิ่ม เพราะมันมาพร้อมกับแพ็คเกจ RTK แล้ว มาเพิ่ม nanoid ในการนำเข้า:

import { nanoid } from '@reduxjs/toolkit'

เรายังจำได้ว่าวิธีเดียวที่จะเปลี่ยน state ได้คือการเรียกเมธอด dispatch ซึ่งมีอยู่ใน store และส่งอ็อบเจ็กต์ action ไป เพื่อให้เข้าถึงเมธอดนี้ เราจะใช้ React-Redux hook useDispatch มาเริ่มนำเข้า:

import { useDispatch } from 'react-redux'

ในโค้ดของฟังก์ชัน NewProductForm มาสร้างค่าคงที่ dispatch ทันทีหลังจากที่เราสร้างค่าคงที่สำหรับ local state ของเรา:

const dispatch = useDispatch()

เรายังจำเป็นต้องนำเข้า action creator productAdded ซึ่งเราได้รับจากบทเรียนที่แล้ว:

import { productAdded } from './productsSlice'

ตอนนี้เราสามารถเขียนฟังก์ชัน handler onSaveProductClick ได้แล้ว มาทำก่อนคำสั่ง return:

const onSaveProductClick = () => {}

ภายในฟังก์ชัน เราจะเรียก dispatch, สร้างอ็อบเจ็กต์ action โดยในพรอพเพอร์ตี้ payload จะมี id ที่สร้างขึ้น, ชื่อ, คำอธิบาย, ราคา และจำนวนของผลิตภัณฑ์ เราเอาข้อมูลทั้งหมดนี้จาก local state โดยที่ในตอนเริ่มต้นเราจะตรวจสอบในเงื่อนไขว่าทุกช่องถูกกรอกครบหรือไม่ - เฉพาะในกรณีนี้เท่านั้นเราจึงจะเรียก dispatch ในตอนท้ายของโค้ดฟังก์ชัน เราจะคืนค่า local state กลับสู่สถานะเริ่มต้น:

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

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

ตอนนี้มาลองรันแอปพลิเคชันของเรา กรอกข้อมูลลงในช่องฟอร์มแล้วกดปุ่มบันทึก เย่! ด้านล่างของเพจปรากฏผลิตภัณฑ์ใหม่แล้ว เปิด Redux DevTools และในนั้นเปิดแท็บ Inspector เราจะเห็นว่าด้านซ้ายนอกจาก @@INIT แล้ว ยังมี action ของเรา products/productAdded อีกด้วย และในส่วนด้านขวา เราสามารถคลิกที่แท็บ Action และ State สลับระหว่าง @@INIT และ products/productAdded ได้ ตอนนี้เราจะเห็นว่าผลิตภัณฑ์ใหม่ของเราถูกเพิ่มแล้ว นอกจากนี้ในแท็บ Action เรายังเห็น action ที่สร้างขึ้นอัตโนมัติโดยใช้ createSlice (เช่น ลองคลิกที่ Raw) เย่: เราไม่จำเป็นต้องเขียนมันด้วยมือ

เปิดแอปพลิเคชันเกี่ยวกับนักเรียนของคุณ แล้วเปิดไฟล์ NewStudentForm.jsx เพิ่ม handler การคลิกให้กับปุ่มบันทึก

เขียนการนำเข้าทั้งหมดที่จำเป็น และเขียนฟังก์ชัน handler onSaveStudentClick โดยใช้เมธอด dispatch ตามที่แสดงในบทเรียน

รันแอปพลิเคชัน กรอกข้อมูลลงในช่องฟอร์ม และกดปุ่มบันทึก ตรวจสอบให้แน่ใจว่านักเรียนใหม่ได้ถูกเพิ่มที่ด้านล่างของเพจแล้ว

เปิด Redux DevTools และลองสำรวจแท็บ Action และ State ตรวจสอบให้แน่ใจว่าอ็อบเจ็กต์ใหม่ของนักเรียนถูกเพิ่มแล้ว ดูอ็อบเจ็กต์ action ที่ถูกสร้างขึ้นสำหรับคุณ และส่งมันมาในคำตอบของงานนี้