การส่ง thunk จากคอมโพเนนต์ใน Redux

ในบทเรียนนี้เราจะส่ง thunk เพื่อดึง สินค้าจาก React component ProductsList

ตอนนี้เรามาเปิดแอปพลิเคชันสินค้าของเรา และในนั้นคือไฟล์ ProductsList.jsx เริ่มต้นด้วยการเพิ่มการนำเข้า thunk fetchProducts ที่เราสร้างขึ้น:

import { selectAllProducts, fetchProducts } from './productsSlice'

เรายังต้องการ hook useDispatch เพื่อส่ง action creator ของเรา และ hook useEffect เพราะที่นี่เรามี side effect, เนื่องจากเรากำลังจัดการกับ network และนั่นคือ API ภายนอกแล้ว:

import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

ตอนนี้บรรทัดแรกในโค้ดของฟังก์ชัน ProductsList ก่อนการประกาศ products ให้เพิ่ม:

const dispatch = useDispatch()

ต่อไปเมื่อดึงสินค้าจาก state เราจะดึงสถานะของคำขอออกมาด้วย:

const products = useSelector(selectAllProducts)
const productStatus = useSelector((state) => state.products.status)

และทันทีหลังจากนั้น บอก React ด้วย hook useEffect ว่าหลังจากเรนเดอร์คอมโพเนนต์แล้ว เราจำเป็นต้องดึงสินค้า ที่นี่ เราจำเป็นต้องมีสถานะคำขอ เพราะ สิ่งสำคัญสำหรับเราคือให้คำขอดังกล่าวถูกส่ง เพียงครั้งเดียวเท่านั้น:

useEffect(() => {
	if (productStatus === 'idle') {
		dispatch(fetchProducts())
	}
}, [productStatus, dispatch])

ตอนนี้เราสามารถเรียกใช้แอปพลิเคชันของเราได้ คลิกที่ 'Products' ในเมนูด้านซ้าย เราจะยังไม่เห็นรายการสินค้า แต่ถ้า เราไปที่ Redux DevTools ของเรา ทางด้านซ้าย ของหน้าต่างจะมี action ที่สร้างขึ้น โดยอัตโนมัติ (ตามที่ฉันบอกไว้ในบทเรียนที่แล้ว) คือ products/fetchProducts/pending และ fulfilled ตอนนี้มาคลิกที่ action products/fetchProducts/fulfilled และที่ฟิลด์ payload ของมัน - นั่นคือรายการสินค้าของเรา! เยี่ยม ทุกส่วนในห่วงโซ่ของเรา - เซิร์ฟเวอร์ ฐานข้อมูล ไคลเอ็นต์ และ Redux - แอปพลิเคชันทำงานประสานกันและร่วมกัน อีกอย่าง อย่างที่คุณเห็นที่นี่ยังมีคุณสมบัติ meta ซึ่งเราเห็นสถานะของคำขอ

มาสังเกตอีกสิ่งหนึ่ง คุณ อาจมีกรณีที่ pending และ ดังนั้น fulfilled จะ แสดงสองครั้ง หากเป็นเช่นนั้น ก็ไม่ต้องเสียใจ เราจะพูดถึงเรื่องนี้ ในภายหลัง

เปิดแอปพลิเคชันนักเรียนของคุณ เปิดไฟล์ StudentsList.jsx ในนั้น นำเข้า hook ที่จำเป็นและ thunk ตามเนื้อหาจากบทเรียน

หลังจากศึกษาบทเรียนแล้ว ให้ดึง สถานะคำขอ studentStatus จากนั้น ใช้ useEffect ส่ง fetchStudents เฉพาะเมื่อเงื่อนไขว่า ค่า studentStatus คือ 'idle'

เรียกใช้แอปพลิเคชันของคุณ คลิก ที่ 'Students' ในเมนูด้านซ้ายของแอปพลิเคชัน จากนั้นเรียกใช้ส่วนขยาย Redux DevTools ในเบราว์เซอร์ เช่นเดียวกับในบทเรียนนี้ คุณควรเห็น action พร้อม pending และ fulfilled (และในนั้น payload พร้อม นักเรียน) ลองสำรวจแท็บต่าง ๆ ของส่วนขยาย