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

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

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

products/ProductsList.jsximport { selectAllProducts, fetchProducts } from './productsSlice'

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

products/ProductsList.jsximport { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

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

products/ProductsList.jsxconst dispatch = useDispatch()

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

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

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

products/ProductsList.jsxuseEffect(() => {
  if (productStatus === 'idle') {
    dispatch(fetchProducts())
  }
}, [productStatus, dispatch])

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

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