การส่ง action ในแอปพลิเคชัน Redux

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

มาเปิดแอปพลิเคชันสินค้าของเรา และในนั้นเปิดไฟล์ productsSlice.js มาดูที่นิยามของ initialState เห็นไหม? ในออบเจ็กต์ไม่มีคุณสมบัติรีแอคชัน มาแก้ไขกันโดยตั้งค่าตัวนับของแต่ละรีแอคชันเป็น 0:

{
	id: '1',
	title: 'Product1',
	desc: 'This is an amazing product',
	price: '300',
	amount: '30',
	reactions: {
		good: 0,
		soso: 0,
		bad: 0,
	},
},

ในออบเจ็กต์ที่สองสำหรับการเริ่มต้น ให้เพิ่มคุณสมบัติ reactions ด้วยตัวเอง นอกจากนี้เรายังต้องเพิ่มคุณสมบัตินี้ในโค้ดสำหรับ reducer productAdded ด้านล่างด้วย เพื่อให้สินค้าใหม่มีฟังก์ชันการทำงานนี้เช่นกัน มาทำกันในเมธอด prepare ของมัน:

prepare(title, desc, price, amount, sellerId) {
	return {
		payload: {
			id: nanoid(),
			title,
			desc,
			price,
			amount,
			seller: sellerId,
			reactions: {
				good: 0,
				soso: 0,
				bad: 0,
			},
		},
	}
},

ตอนนี้มาดูการส่ง action กัน เปิดไฟล์ UserReactions.jsx จากนั้นนำเข้า hook useDispatch และ reactionClicked:

import { useDispatch } from 'react-redux'
import { reactionClicked } from './productsSlice'

ในส่วนต้นของโค้ดภายในฟังก์ชัน UserReactions บรรทัดแรก (ก่อน const userReactions ... ) ให้เขียน:

const dispatch = useDispatch()

และเพิ่มการส่ง reactionClicked เมื่อคลิกที่ปุ่มรีแอคชัน โดยเราจะส่ง id ของสินค้าและชื่อรีแอคชันที่ถูกคลิก:

<button
	key={name}
	type="button"
	className="reaction-button"
	onClick={() =>
		dispatch(reactionClicked({ productId: product.id, reaction: name }))
	}
>
	{image} {product.reactions[name]}
</button>

สิ่งที่เหลืออยู่ตอนนี้คือการแสดงคอมโพเนนต์รีแอคชันในโครงร่างสำหรับหน้าของเรา มาทำกันในไฟล์ ProductsList.jsx ก่อนเอลิเมนต์ Link:

<UserReactions product={product} />

และเช่นเดียวกัน ก่อนเอลิเมนต์ Link ในหน้าสินค้าในไฟล์ ProductPage.jsx:

<UserReactions product={product} />

ตอนนี้เมื่อทุกอย่างเข้าที่แล้ว เราสามารถเรียกใช้แอปพลิเคชันของเราได้ ลองคลิกที่ปุ่มรีแอคชันดู เราสามารถเพิ่มสินค้าใหม่และกดปุ่มเหล่านั้นได้เช่นกัน ตอนนี้ไม่ว่าเราจะคลิกที่ปุ่มรีแอคชันที่ใด ค่าที่เปลี่ยนแปลงจะแสดงสำหรับสินค้านั้นในทุกหน้า ดูหน้าสินค้าแต่ละรายการ (ที่คุณคลิกรีแอคชัน) และหน้ารายการสินค้า และในทางกลับกัน สำหรับทุกหน้า จำนวนรีแอคชันสำหรับสินค้าเฉพาะจะเหมือนกัน

บทเรียนนี้เป็นบทเรียนสุดท้ายในบทเกี่ยวกับการทำงานกับข้อมูลใน Redux เราได้ทำงานกับข้อมูลใน Redux store อย่างลึกซึ้งมากขึ้น และตอนนี้รู้วิธีเพิ่มฟังก์ชันการทำงานที่จำเป็นในแอปพลิเคชันและใช้ข้อมูลใน React components แล้ว

เปิดแอปพลิเคชันนักเรียนของคุณ ในไฟล์ studensSlice.js ให้เพิ่มคุณสมบัติ votes พร้อมฟิลด์ที่เกี่ยวข้องให้กับออบเจ็กต์สำหรับการเริ่มต้น ทำสิ่งนี้สำหรับ reducer studentAdded ด้วย

ภายในฟังก์ชัน UserVotes ในไฟล์ UserVotes.jsx ให้สร้าง dispatch สำหรับ hook useDispatch และทำการส่ง action voteClicked เมื่อคลิกที่ปุ่มโหวต ส่ง id ของนักเรียนและชื่อ vote ให้กับมัน เช่นเดียวกับที่แสดงในบทเรียน

แสดงปุ่มสำหรับการโหวตในโครงร่างสำหรับคอมโพเนนต์ StudentsList และ StudentPage